Using GLYPHICONS's free pngs with classes

Question

Glyphicons allows free use of its halflings icon set via Twitter Bootstrap: Bootstrap comes with two files (a .woff and a .svg) that are loaded as font files by the browser. Glyphicons also allows you to download PNGs of all the rest of its icons.

Is there a way to use bootstrap-esque classes in order to load the PNGs, or do I have to use ye old <img /> tags?

Answer 1

You could do something like this:

.glyphicon-envelope:before {
   content: "";
   width: 20px;
   height: 20px;
   background-image: url(envelope.png);
   display: block;
}

The width and height would need to be adjusted to fit the image size correctly