The normal way of delivering iconography on websites was traditionally the use of bitmap formats such as PNG. They're quick and direct, and they ensure out final results.

The use of web fonts have given us another alternative. By definition, they're scalable and resolution-independent. No need to specify higher resolution graphics for high resolution screens.

Lets see some examples:

the good side:

  • You can easily change size and color
  • You can easily shadow their shape
  • You'll be able to add strokes to them with text-stroke or add gradients/textures with background-clip.
  • Small file size: Good designed icon fonts can be as little as 12Kb for the .woff font.

the bad side:

  • Icons can only be rendered in monochrome or with a gradient fill in browsers that are capable of rendering CSS3 gradients.
  • Creating an icon font can be a long time and complex process.

The main complaint about using fonts for icons is that it can mean adding a meaningless character to our markup, but we can avoid this by using CSS generated content or the data attribute in combination with the :before and :after pseudo-selectors.

The data attribute is a new HTML5 property that can be used in combination with CSS. This new property lets us add our own metadata to elements and send it to our CSS element.


<span class='icon iconStyle' data-icon='F'></span>


.icon:before { content:attr(data-icon); }
.style1 { font-size:100px;color:#0080be;text-shadow:2px 2px 5px rgba(0,0,0,0.5); }

and this will be the result:

Now, you would need to decide whether this method is appropriate for your website, but in my opinion, despite the disadvantages, icon fonts have huge potential.