Icon Fonts are Awesome
- Because you can easily change the size
- Because you can easily change the color
- Because you can easily shadow their shape
- Because they can have transparent knockouts, which work in IE6 unlike alpha transparent pngs.
- Because you can do all the other stuff image based icons can do, like change opacity or rotate or whatever.
- You’ll be able to do things like add strokes to them with text-stroke or add gradients/textures with background-clip: text; once browser support is a bit deeper.
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 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.