Icon Fonts. Start using them.

Micha Goldfine - Thursday, June 20, 2013


A great way to add icons and symbols to your website is by using a font set instead of bitmap or vector images. In this post I will point you to the most popular icon font-sets and the benefits of using them. 

Icon font-sets

Simply put, icon font sets are the same as any other type-face sets such as Times, Helvetica, Arial etc. Using a font set instead of graphic files has many benefits in web and mobile applications. 

Two prominent benefits for using icon font-sets are speed and customisation. Speed is obvious since we are loading a font-family which is one HTTP request and loads with the rest of the content in the document. The file size is usually smaller than a bunch of PNG files or one 'sprite' file.

With the rapid use of responsive websites having control over the size of our content is a most and the power to customise icon fonts the same as we do with other type faces is a huge benefit. 

Adding a Icon font-set to your project

Once you found a font-set, download (make sure to check the usage license!) it to your computer and add it to your project directory. I recommend adding it to a "font" directory which will reside with the rest of the project assets. Sometimes you might find that adding the font-set together with your CSS files makes it easier to manage. Whatever your preferred method make sure you keep all the fonts in one folder.

Font Awesome Directory SampleFor example I like using Font Awesome (fontawesome.io) in many of my projects. The library has many useful icons and most importantly it's included CSS file is very easy to add and use.

Another great way to include icon fonts in your project is by linking them to a CDN (content distribution network). With Font Awesome you don't even need to include the fonts you only need to create a link to the CDN CSS file. This is a very quick and easy way to add icon fonts to your project. You only need to add the html tag and class, the rest is done on the CDN server.

Icon font-sets should have CSS classes and attributes that will 'translate' or 'call' the corresponding ASCII code for the specific icon in the font file. In Font Awesome for example the classes will look like so:

.icon-signal:before { content: "\f012"; }

The way to add an icon in your HTML document is by adding a HTML tag with a class predefined by the font author CSS. In Font Awesome to add an icon you will use the HTML tag <i>. Since this is an inline element it can be added to any HTML element without disturbing the flow. For example:

<p>This is a old school <i class="icon-camera-retro"></i>camera.</p>

This is a old school   camera.

If you haven't added additional styles or attributes to the icon, it will retain the same attributes from it's parent HTML tag (in this case the <p> tag). 

Just to make sure the icon does render instead of a blank space, I usually add a 'none-breaking-space' reserved character in-between the opening and closing <i> tags.

<i class="icon-camera-retro">&nbsp;</i>

Some icon font libraries such as IcoMoon or Pictonic will allow you to choose specific fonts for your project instead of downloading an entire set. Some libraries also include a substitute graphic file for legacy browsers. I would recommend using a well known font library. Good quality libraries will offer the best icon options together with good support and constant updates. 

With higher definition displays and constant hardware changes it's important to have assets that can match those changes and render correctly.

Customising Icon Font

Customising an icon font-face is like customising any other font-face on the web. With the introduction of CSS3 designers and developers have greater attributes to customise type-faces. With the combination of RGBA, text-shadows, transitions etc. we can start creating interesting graphic elements on a website without sacrificing speed or legibility.

OK, maybe not the most interesting sample but nonetheless it shows how icon fonts can be styled using the same font style attributes as any other font-face.

Legacy browsers and substitutions 

Older browsers are still in use and has much as we, developers and designer would love to create for the newest and greatest the reality is that many people simply cannot upgrade or do not know they can, or simply don't care.

Most icon font sets will include an SVG substitute if the browser does not support any of the other font formats (EOT, WOFF, TTF) but if nothing works you have two alternatives. One, tell your client that it will costs double to support IE5.5 for the Mac, or two, tell your client that it will cost less than double to create bitmap version of the icons, in various sizes!

In reality you can create alternate graphic icons and combine them into one sprite image. Some icon sets include a PNG alternative so you don't really need to create one from scratch.

Preview my icon fonts

Now that we've chosen an icon set how can we create mock-ups or preview the icons? If you know what you want and only need to add the icon class to your syntax you can simply use the set's 'cheatsheet' (why it's called this way I have no idea). A sample of such cheatsheet can be viewed here.

But what do we do about Photoshop, Fireworks and other design software? one way is to take a screenshot of the cheatsheet (not really) or you can use a character map viewer application.

Since icon fonts are fonts you can install them into your system's font manager the same as you will do with any other font. Different operating systems accept different font formats but these days you can easily install the Open Type format (OTF) or TTF (True Type Format) on both Macs and Windows.

Since I use a Mac I found this great app which shows all the characters in a font set and allows to copy them to your clipboard. The app is Ultra Character Map and can be purchased from the App Store. See more details here.

The last alternative which always works is to use the icon bitmap image. 

All in all, you will probably won't use more than a handful of icons from any given set. Sometimes you will use the icon as a large graphic element and sometimes just as a symbol next to a text like a 'v' mark in a 'save' button.

Recent Posts