I’ve now completed a few icon projects for clients where the deployment method has been a font. It’s a fairly painful process, but a great way of providing resolution independent graphics to all sorts of browsers, including as far back as IE4. The alternative has been SVG sprites, which work, and allow multiple colours, but to me have been even more of a pain to implement.
Something I hadn’t considered a problem until recently, was font-face support on mobile, which of course iconfonts rely on. Ian Feather (Front End Developer at Lonely Planet) wrote about this in Ten reasons we switched from an icon font to SVG.
The Filament Group have done a lot of work on this, and their research showed that the top 5 browsers without font-face support have a user base that can’t be ignored:
| Opera Mini | 261 million |
| Nokia XPress browser | 70 million |
| Blackberry 4 & 5 - stock browser | 20 million |
| Android 2.1 - stock browser | 10 million |
| Windows Phone 7 - 7.8 | 10-15 million |
These user numbers are estimates, but the total number of devices that don’t support font-face is around 370 million. This may or not affect your project - at least one of my clients uses the iconfont within an self-contained application, and it will never be viewed in any browser. Thankfully, the Filament Group also provide two solutions:
Bulletproof Icon Fonts - if you have to use icon fonts, here’s a way to implement them with fallbacks.
Grunticon - takes a folder of SVG/PNG files, and outputs them to CSS in 3 formats: svg data urls, png data urls, and a third fallback CSS file with references to regular png images, which are also automatically generated. So you can avoid the hassle of working out sprite positions and still get each icon setup with a class name, just as you would with an iconfont tool like IcoMoon. I haven’t had a play with this yet, but it looks very promising indeed!
Finally, a very useful tool if you’re exporting SVG from something like Illustrator, is svgo ui, an easy drag and drop front end to the svgo command tool for optimising file sizes. I find I save on average about 30% on my icon files!