Font Icons
Ever since Chris Coyer’s post on the advantages of using fonts for icons, I have been a firm believer that icon fonts are the way forward for creating beautiful resolution independent interfaces.
Recently I have had the opportunity to create an icon set of my own and thought it would be beneficial to document my workflow and the problems have come across.
Workflow
After a brief period of failed experimentation with the font icon generation tool Icomoon, the workflow I recommend is based on that set out by Heydon Pickering.
- Create the icon. My tool of choice for creating the icon is Adobe Illustrator, although any vector application should work just as well. Steps to make your life easier:
- Set all measurements in points
- Use a 1000 point x 1000 point canvas
- Align everything to the grid (point based)
- Create objects using fills and not strokes
- Export the icon as an SVG
- Map the font to characters. I found using Inkscape to be the easier way to map characters in the font to the SVG exported from Illustrator. Again using a 1000 point canvas and exporting the output as an SVG.
- Convert the SVG to TTF. I had no problems using FreeFontConverter to do this.
- Generate the font-face kit from the TTF. I used Font Squirrel to generate the font-face kit.
- Add the characters and classes to the CSS. You should use an entity conversion chart to work out what CSS content should be generated by the CSS.
Problems and Pitfalls
Support for icon fonts is very good, the problem comes with using CSS generated content to insert the font characters, Internet Explorer 7 does not support this. Thankfully there are a couple of options for a partial work around.
- Option One. Use Modernizr to check for CSS generated content and polyfill as necessary.
- Option Two. Use CSS expressions, Foundation is an example of this.
The reason for terming this a partial work around is that whilst both methods work reliably, they both run on page load. Meaning that should you insert any additional data through JQuery or an Ajax call, the icons on those elements will not receive the CSS generated content and will not work in Internet Explorer 7. I have not yet found a way around this.
The second problem is one that seams from using this particular workflow. The best font icon sets map the icons to the private use Unicode characters to prevent them from being read aloud by screen readers. It would appear that you are unable to map icons to these characters using Inkscape and instead are restricted to using standard characters which will get read aloud by screen readers.
Any solutions to either of these problems are most welcome.