Example

The table below shows how the icon font for Iconic matches its own icons with Unicode equivalents. The third column shows glyphs from Iconic and the fourth shows the default Unicode glyphs. Note: If you’re reading this in an RSS reader, you will only see the default icons. Duh.

The Nitty-Gritty

I went through the specifics of code in my previous article, but I thought it would be worth showing again. Here is the basic CSS used (I have no doubt there are better ways to write this code, please feel free to share any feedback by commenting):

@font-face { 
  font-family: 'IconicStroke'; 
  font-weight: normal; 
  font-style: normal; 
  src: url('iconic_stroke.eot?') format('embedded-opentype'); 
} 
@font-face { 
  font-family:'IconicStroke'; 
  font-weight: normal; 
  font-style: normal; 
  src: url('iconic_stroke.ttf') format('truetype'); 
} 
.iconic { 
  display:inline-block; 
  font-family:'IconicStroke'; 
}
.bolt:before {
  content:'\26a1';
  font-size:32px; 
  vertical-align:.15em; 
  margin-right:.25em; 
  color:#5d504f; 
  opacity:.8;
  text-shadow:0px 1px 1px rgba(0,0,0,.3); 
}

For this demo, I simply rap the content in a span, although you could also use an empty span tag to contain the icon for more control.

<span class="iconic bolt">Lightning</span>

The code above results in the example below:

Icon With Text

There are a lot of attributes applied to the example’s icon which show the advantage of using font icons. The icon can easily be resized, colored, rotated, scaled and adjusted with filters—all at runtime. No more re-saving images when you need to make a change.

Managing Extensibility

The most obvious outstanding issue is how to deal with icons that do not have a Unicode equivalent. Philip had a solution for that as well. Unicode has various private ranges which are sequestered for this exact purpose. Iconic uses the E000-EFFF range in these cases. Since there are no official assignments in this range, using them creates no semantic conflicts. However, any glyph that does not have a character assigned to it will display a placeholder (). This causes an issue for browsers that don’t support @font-face, so designers & developers still need to perform a check that a browser supports @font-face before employing this method.

Open Issues and Next Steps

There are still some issues that will need to be worked out, most notably a bug in Webkit that will not display glyphs at high Unicode hex values with the content:before rule. I have posted a bug and hopefully it will be fixed soon.

This is a major step in the right direction. From my perspective, this new method makes icon font rendering a legitimate and powerful approach towards displaying icons. I want to thank Philip Shaw who shared this idea and Yann Hourdel who helped me create the font creation scripts for Iconic. While Iconic is free and open source, I would like to offer these icons on services such as TypeKit and Google Web Fonts. The more demand there is for icon fonts, the greater chance they will be accepted at some point.

On a side note, the help I received through this process was one major reason why I open sourced Iconic. The new Iconic font faces were a community effort and it would not have happened without the tremendous help and feedback given by so many people. Speaking of feedback, I would love to hear your feedback on this method and how we can continue to improve upon this idea.