Iconic fonts

The world wide web and images have always made awkward bed fellows. Images are added to the document and are supplemental to text which is the primary mode of communication. So if you want to add an icon you have a number of choices. An image via an html tag, a background via CSS and a typeface via loading an external font. This is where things get mirky.

A font is, as we all know, used for text which is the universal medium on which we communicate on the web. Using it as an resource for icons seems counter intuitive. So what’s great about using fonts?

  1. It easy to group and access a set of icons.
  2. They are resolution independent.
  3. They can be manipulated like text.
  4. CSS provides a way to add text. It is the presentation layer after all.

Doesn’t it sound fantastic? Well, yes, except for a single fly in the ointment. We may well use a font for images but it is still text to the browser. Text doesn’t only visually convey words to users but it also acts as a transformation layer for machines like search engines and screen readers. It so happens that we don’t have strict rules on how to deal with this.

It would be nice if we could flag the text as an image and still use ASCII characters. However, we can’t say that these characters are symbols that have no alpha numeric meaning. It so happens that unicode explicitly contains both symbols and alpha numeric characters. Unicode provides a way to universally assign characters specific codes so that machines can understand them. This means you can’t add icons that map to certain reserved slots. Thankfully Unicodes governing body has made provisions to allow us to add random meaningless junk into so-called private use code points.

Characters in these [Private Use] areas will never be defined by the Unicode Standard. These code points can be freely used for characters of any purpose, but successful interchange requires an agreement between sender and receiver on their interpretation.

Let’s take a step back and review what are our options are:

  1. An image in the HTML source. Tags like IMG, CANVAS and OBJECT.
  2. A background image. This can be a bitmap or even a vector image
  3. A CSS pseudo-element image. .icon { content: url(info.png); }
  4. A font in the HTML source. <span class='icon'>&#10140;</span>
  5. CSS pseudo-element string character. .icon { content: "\E000"; }


  1. Pseudo-elements aren’t supported in IE6 and IE7.
  2. Fonts are monochrome.
  3. Images can’t be coloured in css.
  4. Bitmap images don’t resize well.
  5. Can’t set size on generated content images in CSS.
  6. Font icons need to be assigned to the unicode private use blocks.

I think the best route is to use a custom dingbat font for icons associated with text so that having no icon is a reasonable fallback. Stand alone icons or icons that are multi-coloured would need to be an image. For font icons accessibility you would need to have characters mapped to the private use areas. Can anybody suggest a good Font editor?

Next entry: Whose prefix is it anyway?
Previous entry: The Web Devided