Making an Icon Font

While doing some fun stuff at work, I found myself needing to make a sprite for 50+ icons. Designer Aaron Robbs and I have been wanting to make an icon font for a while now (think Pictos), and I realized that instead of sprites, and icon font might be a better tool for the job at hand.

A Google search led me to Inkscape, which allows me to create an SVG font. Then I can convert the SVG font to TTF through an online service, and then use FontSquirrel’s @font-face generator to get all the formats I’ll need for web embedding.

Why an icon font?

Icon fonts have excellent browser support (all the way back to IE4), they can be styled with CSS, their styles can be changed on CSS events, they don’t pixelate, and they’re easy to adjust (sure beats resizing a sprite and modifying the accompanying CSS!)

Depending on how many characters you include they can be very small in size, potentially smaller than all the icons you’d otherwise need to transfer over the wire.

If you’re still not sold, check out Chris Coyier’s “Icon Fonts are Awesome” page.

Building the font

Armed with my collection of icons in an Adobe Illustrator file and Inkscape, I began the tedious process of creating the font. Each icon needed to be saved as an SVG file, imported into Inkscape, properly resized and positioned on the artboard, run through a specific set of transforms, and then bound to a key. For more on the process, reference this article and this video.

In progress

Adding the font

Once all the characters are bound to keys, run through the conversion process mentioned before. To get the font into the page, use the @font-face syntax and then add the characters with CSS generated content to avoid polluting your markup.

Note that you can also add the icons with the HTML5 data attribute.

Which will result in something like this:

Example

Lesson Learned

Icon fonts are awesome. Currently the woff, ttf, and eot files are each under 20K, which is comparable to an optimized transparent png of 20px sprites. If you want an icon font but don’t want to build one yourself, Pictos now offers Pictos Server, which allows you to build your own icon fonts from over 650 pre-made icon choices. Also, if you didn’t look at Chris Coyier’s demo page earlier, be sure to give it a look.

Comments