CSS - Icon Fonts




Popularized by Twitter's Bootstrap, the technique of using @font-face with icon-based fonts has garnered a following of its own as a resolution-independent alternative to bitmap icons. The technique consist of using a custom web font that replace the alphabet with monochrome glyphs, which can be styled using CSS, just like any other text.

The is no shortage of comprehensive, good quality icon fonts that would cover most of your needs. However, importing multiple sets of fonts in half a dozen formats only to use a small subset of the icons is a bad idea. Consider building your own custom font with free tools such as Fontello, Font Builder, or Inkscape

The most common way to use icon fonts is by assigning a .icon or .glyph class to a particular HTML element, and then using the letter corresponding to the desired icon as its content:

<span class="icon">a</span>

After having imported your custom font using @font-face, you would declare it:

.icon {
    font-family: 'My Icon Font';

Another technique consists of using the :before pseudo-element and the content property with a unique class for each icon:

<span class="glyph-heart"></span>

[class^="glyph-"]:before {
    font-family: 'My Icon Font';
.glyph-heart:before {
    content: 'h';
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License