Using fonts for icons are great for allowing you to:

  • Cater to all screen densities including Retina displays
  • Bundle a set of icons together in one font to save space and in turn reduce HTTP requests
  • Allows you to change the icon colour on the fly

Icons can be layered if you require multiple colours in your graphic and the general method would be to absolute position individual glyphs inside a wrapper. Take a look at Dan Scotton’s BBC Weather Icons to see how it can be done.

I discovered icomoon.io which lets you import your own graphics and will create all the various font files required to support IE (6+), iOS Devices, Android, Chrome, Firefox, Opera, Safari and others. IcoMoon requires an SVG file format (or font file) for import but this is where I came unstuck as Adobe Fireworks (Mac CS5) doesn’t offer a native SVG export option and that is where my vector images were stored. Luckily with a quick google around I discovered and downloaded an SVG exporter plugin for Fireworks. The command to export is in an unfamiliar menu (Commands > Export > Export SVG) in case, like me, you can’t find it at first.

To get going, head to http://icomoon.io/app/ and use the “Import Icons” feature.

Once you have downloaded and extracted your assets, you will notice handy index.html included which is a really good point of reference to see how to go about implementing the font as an icon. I thought I’d summarise the basic method employed to implement your new font icons with inline comments:

<style>
/* This registers your new custom font (feel free to change the name to something of your own naming) */
@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot');
    src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
        url('fonts/icomoon.svg#icomoon') format('svg'),
        url('fonts/icomoon.woff') format('woff'),
        url('fonts/icomoon.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Using the before prepends a 'fake' element to your target element */
.icon:before{
    content: "\22"; /* Your unicode character (icomoon provides this) */
    font-family: 'icomoon'; /* Reference your custom font */
    speak: none; /* Ensure screenreaders skip over what is essentially garbage to them. */
    -webkit-font-smoothing: antialiased; /* Force antialiasing */
    font-style: normal;
    font-weight: normal;
}
</style>
 Your Icon Text

With all this newfound awesomeness, sites that offer SVG downloads like thenounproject.com (where I went to to get the icon for this post) means you can have an elegant way of implementing icons on your sites.