If you are still using gifs, pngs or jpegs for common icons, let me explain why icon fonts are a significant improvement. I will get you using them quickly and easily with working examples of ‘Google’s Material Icons’ and ‘Font Awesome’. If you are already using icon fonts you should make sure that you including them correctly so that you aren’t damaging your SEO, are supporting ARIA and coding semantically.
What are icon fonts
Icon fonts are just like regular fonts, except instead of containing letters and numbers, they contain icons. They work like the old Dingbats and Webdings typeface.
Why are icon fonts better than bitmap icons?
Icon fonts are simply typefaces and because of this they have a number advantages over raster images like gifs, pngs and jpegs. They have transparent backgrounds, even on IE6. You can resize them easily using CSS and apply any CSS effects to them. They load quickly as they have a small file sizes and only need one HTTP request, unlike using multiple bitmap images.
How to quickly start using Icon Fonts
Google Material Icons
This example code shows you how you can insert a Google Material Icon in just two lines of code.
To change the icon simple swap the word ‘face’ for any of the Google Material Icon names. Use an underscore for any two word names for example ‘flight_takeoff’.
The code simply includes this stylesheet. The stylesheet uses @font-face to specify the Material Icons font and provides the url of the font on the CND. The CSS for the ‘material-icons’ class used on the span specifies that Material Icons font should be used.
This example code works in a very similar way to add a Font Awesome icon in just two lines of code.
Style your Icon font with CSS
Now you are using an Icon font it is straightforward to style your icons with CSS just like you would with any other typeface. This example demonstrates changing color, size and opacity with CSS
Improve your markup
Now you have got the basics of Icon Fonts let’s improve our code:
Making sure your code does not damage your SEO
You have probably noticed that Google Material Icons uses the text within an element to know which icon to use:
<span aria-hidden=”true” class=”material-icons”>face</span>
If we remove the word ‘face’ the icon disappears. This is because Google Material Icons, like other icon fonts, uses ligatures to include an icon. So if an element has the class ‘material-icons’ it will check the text within the element. If it contains the word ‘face’ the face icon will be displayed. If you change this to the word ‘pets’ an icon of a paw print will be shown.
The problem with this is that because the text is in the element it will be read by search engines, possibly seem out of place, and damage your SEO.
We can move the word ‘face’ into the tag itself by specifying it as an attribute like my-icon=”face”. We can then use the CSS pseudo-element to insert the contents of the attribute into the tag. Here an example of this improved SEO on our basic Google Material Icon markup. We have used the ‘:before’ pseudo-element but as the tag is empty ‘:after’ would do exactly the same thing. It is worth noting that ‘:before’ is only support from IE8 and up. So if you need to support further back than that you will need to either take a small SEO hit, or use a system that doesn’t use ligatures like Font Awesome.
The example above uses a pseudo-element to improve the SEO and take the word ‘face’ out of the HTML tag itself. You might think that because the word isn’t in the tag it isn’t read by screen readers. Unfortunately this doesn’t appear to be true as pseudo-elements are still read by some screen readers. We can fix this by using the ‘aria-hidden’ attribute to stop the ‘:before’ content from being read. Here is an example of Google Material Icon markup with improved SEO and ARIA support.
Making sure your code is semantic
Some Icon Font producers suggest that you use <i> as the base tag for your icon. Please don’t. It is not semantic, and ‘i’ does not stand for icon. You should be using spans instead, even if some big players, *cough* Facebook, aren’t doing the right thing. If you need more persuading check out this stackoverflow question.
Fontello lets you easily create a custom typeface that includes only the icons you want from a selection of icon fonts. It is particularly good if your project requires very small file sizes.
Fontello lets you search for and select, the icons you want from a variety of icon fonts, including Font Awesome. Once you have chosen your icons you can download a package with a single font containing only your selections. This makes the file size significantly smaller than a font package that includes all its icons. I made a Fontello font with 14 icons and the file size of the WOFF font was 7kb compared to 90kb for the default Font Awesome WOFF. The package contains a demo.html file so you can quickly see how to use the icons in your project.
Do I need to specify multiple font formats?
At the time of writing an icon font using TTF/OTF or WOFF will work on 97% of the browsers in the UK. For greater cross browser support Chris Coyier’s article discusses multiple font formats in depth and includes a practical level of browser support using two file formats. You can provide support right back to IE6 by including EOT in your font format stack. EOT is included in Coyier’s deepest possible support option. Note that you need to use a question mark after the EOT file extension to fix an old IE bug with multiple font declarations. By default Fontello provides 5 different font formats for strong cross browser support out of the box and includes the fix for IE6 and 7.
What about SVG icons?
Like icon font, SVG icons represent a significant improvement on raster based icons. Sitepoint have written a balanced debate on the respective merits of each. If you are going to use SVG icons you should be considering SVG fallbacks for older browsers. Watch this space for a future post on SVG icons.