Icon fonts pitfalls

Icon fonts pitfalls

Icon fonts have been around for a while and were embraced by many front-end developers for their usage simplicity. I have used them myself both custom made and from the libraries out on the web. 

Icon fonts are just fonts. However, instead of containing letters, they contain symbols and glyphs. You can style them with CSS, changing their color and size and they seemed like good alternatives to raster (such as PNGs, JPGs etc) or vector images (such as SVGs). But as with all technologies there are pitfalls you should be aware of.

This year popular social version control system GitHub (github.com) announced that they are scrapping the use of icon fonts in their system in favor of SVG icons. Why would they do that?

Icon fonts advantages

There are many icon fonts libraries out there which are free to use: just serve font locally via an @font-face rule or through a hosting service and you are ready to go, to list a few of them:

You can also create your own icon fonts from SVGs by using for example the online tool, IcoMoon.

You would typically use icon fonts with the following mark-up (this is for Google icons):

<i class="material-icons">picture_in_picture</i>

or for Font Awesome:

<i class="fa fa-calculator" aria-hidden="true"></i>

You can style icons with CSS, by for example specifying their size, color, font-weight, even animations and transformations -- just the way you would do when you style a text. They are after all treated by browsers as text. The limitation of icon fonts is that they are monocolored. Although multicolored icon fonts are possible, but then you would need to stack them on top of one another.

Icon fonts are well supported, even as far back as IE6 -- those poor thing developers who still have to take IE6 into consideration. They are however not supported in Opera Mini.

File sizes for icon fonts are small, font caches giving an added performance boost.

So why would some people and websites be unhappy using them?

Icon fonts pitfalls

GitHub when announcing its decision to go away from icon fonts in favor of SVG published a well-founded argumentation, which you can read here. The list is long and deals with both workflow, quality of the icons and page rendering. I will explain some of the more essential.

Icon fonts render poorly on 1x displays (none Retina displays, for example). To test how you page looks on ordinary displays, try the app, Blind.

If you inject SVG directly into the markup, like GitHub does, you will not see a flash of unstyled content as the icon font is downloaded. You cannot animate icon font, but you can do so with SVG if you wish so. Even though there are tools available for icon font, building them is hard and it is easier workflow with SVGs.

The most noticeable drawback is of icon fonts is accessibility, that is the elements on the web must be accessible for everyone regardless of disabilities.

If an icon font is not used with supplement text, like so:

<i class="fa fa-calculator" aria-hidden="true"><span>Calculator</span></i>

where <span>Calculator</span> is supplement text, screen readers used by people who cannot see will never be able to figure out what this is about. Font Awesome now includes aria-hidden="true" attribute in their mark-up, forcing to ignore icon font all together. If your design does not permit using visible supplement text then you should always use supplement text only visible for screen readers, wrapped in for example sr-only class (available in Bootstrap) or similar, like so:

<i class="fa fa-calculator" aria-hidden="true"><span class="sr-only">Calculator</span></i>

So far so good. But what about people with Dyslexia? One of ten people has Dyslexia. These people use specially designed fonts to read. So when they set this font on a webpage all the default fonts are replaced. And if one of those fonts was icon font, then the user will see empty spaces instead of icons. There is no feasible way to overcome this problem with icon fonts. SVGs, for example, will function just fine.

Wrapping it up

To conclude all these -- prefer SVGs for icon fonts. If for some reason you have no choice but to use icon fonts, you have to always supplement those with text. And remember that not everyone is using a shiny Retina display. Test your content on 1x displays.

Take a look again at Google material icons. There you can grab any icon both in SVG, PNG or icon font. Make the right choice next time:)


Om bloggeren:
Igor Koudrik har Master i Computer Science fra Universitetet i Oslo og laget sin første html-side i 1996. Han er en lidenskapelig front-end utvikler som alltid er oppdatert på ny teknologi og nye løsninger.

comments powered by Disqus