A Free Icon Web Font

In a previous article, I addressed the many advantages of using a web font (in place of images) to render icons into your UI design. In the same article I mentioned a frustrating deficit of high quality, free icon web fonts available for embedding and conceded my own failure at building one with Fontstruct (less a font design tool than a mental health risk).

After continued experimentation, I found a satisfactory way to create a TTF and I'm now able to offer you Heydings Icons. It's a fairly modest collection of 50 57 60 glyphs specifically intended for the accessorization and classification of textual cues such as hyperlinks, navigation elements and buttons. You can, of course, use the set much more expressively as well. Also, there's no requirement to embed; you may just want to use it as a desktop/print font.

The icon web font in action

As I said, the font is best used to enhance text-based content. Probably the best way of achieving this is via the :before and :after pseudo-classes, since this requires no changes to the markup. In the following example, I am using two icons to help classify a link that connects to an RSS resource served from an external location.

The code

a:before, a:after {
     font-family:'Heydings';
}
a[href*="rss"]:before {
color:#c03f29;
content:'R';
}
a[href*="rss"]:after {
vertical-align:super;
font-size:16px;
content:'e';
}