Using Icon Web Fonts

Update: Since writing this post, I was finally able to create a web font to my liking. You can read about it and download it in this subsequent article.

Prefixing (or occasionally suffixing) hyperlinks with little icons can be helpful for qualifying the type of action the link offers the user. A classic example is the deployment of the instantly recognisable (in most of its various permutations) RSS icon. At a glance, items bearing this icon are clearly links that will direct the user to either some raw RSS or a feed subscription prompt (unless, that is, the site's developer is nefariously trying to exploit this convention).

These icons are typically manifested as either a CSS background image or an image tag inserted before the link element's text node. However, after the advent of broad @font-face support, it is now possible to embed a font that contains the various icons required by your UI. This approach offers the following advantages:

• The 'icon' is inserted and treated as text, making scaling for different zoom levels an implementary non-issue
• Scaling is not just easy but does not result in the visual degredation expected when using images
• Recolouring the icon is as trivial as recolouring text. Making your basic RSS-signifying character suitably orange is as simple as applying color:orange
• Does not require the creation and uploading of a large number of images and image sprites or a proliferation of background-position declarations
• Requires just one http request for the all-encompassing icon library that is the font itself

A problem

The main disadvantage with this technique regards semantics. Much has been said about Google's algorithms tending to frown upon bad grammar and spelling these days and a bunch of single, stray characters appearing in the markup is likely to invite disdain on the part of the crawling bot. This could have a negative impact on the listing of pages belonging to your site.

Icon fonts and semantics

When it comes to affecting semantic HTML, you either want to have a positive impact on the document or no impact at all. The 'no impact' approach to embedding icons is easy enough and the result is akin to using a background image. The icon is inserted via the :before pseudo-class like so:

a.rss-link:before {
     content: 'r'; /* the character corresponding with the rss icon */
     font-family: 'My Icon Font';
     color: orange;
}

This is all well and good (and is recommended by the makers of the 'Pictos' icon font) because the pseudo content is not present in the document. However, what if we wanted to capitalise on the existence of our 'stray' character? If we had opted to use an image tag as an icon, we could have written 'RSS' in the title attribute, exposing a textual alternative to the visual signifier on hover.

Using an icon web font, perhaps we could wrap the character in an abbr tag. This is semantically superior to using an img because the character and the icon it invokes are equivalent as shorthands (textual and visual shorthands, respectively). As with the img, the associated title attribute affords the user a fuller description of the abbreviated prefix.

<a href="feed.rss" type="application/rss+xml">
     <abbr title="RSS">r</abbr> Latest news stories 
</a>

An icon web font deficit

Much as I like the 'Pictos' font mentioned earlier, it is a commercial font. I have yet to find any good (or comprehensive) free icon fonts available for embedding and attempts using Fontstruct to create my own variation have so far proven futile. If anyone is aware of a good, free web icon font that includes RSS, social bookmarking and WYSIWYG style icons, please leave a comment.

Note: My abbr technique would be better if screen readers supported title attribute vocalization as a default, which many don't.