bootstrap Glyphicons

Use this CSS sprite generator, uploading the zip file. It will create the relevant CSS classes for you (names are taken from images itself), merging all images in one (transparent) PNG one.


You could also use the Font Awesome solution.

Scalable vector graphics means icons look awesome at any size.

Designed from scratch to be fully backwards compatible with Twitter Bootstrap 2.0.


You would have to recalculate the background positioning of every glyph icon into your own class or overwrite the classes already set by the bootstrap in order to work them in. Twitter's bootstrap uses the halfling (free) version of the icons which are 14px all around, the full set is double the size so the old background-position's won't work.

Here is an example of what one of the bootstraps icon classes looks like:

/* class for the icon "fast-backward", notice the positioning values set in pixels */
.icon-fast-backward {
    background-position: -216px -72px;
}

/* main class, defining what icon sheet to use */
[class^="icon-"], [class*=" icon-"] {
    background-image: url("../img/glyphicons-halflings.png");
    background-position: 14px 14px;
    background-repeat: no-repeat;
    display: inline-block;
    height: 14px;
    line-height: 14px;
    vertical-align: text-top;
    width: 14px;
} 

I have also created one on Github. Didn't see Marco's post above until after.

https://github.com/ekryski/bootstrap-template