Search code examples
csstwitter-bootstrapfontsglyphicons

Using GLYPHICONS's free pngs with classes

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?

Solution

  • 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