Last Updated: October 16, 2018
· olilish

Icon fonts

When I first read about using fonts instead of images for icons, I was a little skeptical. Particularity from an accessibility point of view, how could the letter 'A' be read by a screen reader as say, an RSS icon for example.

Also, I like to create my own unique vector icons, I bet it would be a painful process to make my own icons into a font for use on the web, I should just stick to sprites.

But having just found IcoMoon I can say my mind has well and truly been made up. Icon fonts are pretty awesome, and services like IcoMoon and Fontello make it super easy to customize and make your own icon fonts.

The great advantages to using fonts for icons instead of images are that they are style-able with CSS, and will look great on retina devices as they are vector based and scalable.

Check out the IcoMoon demo video or even better Mr Chris Coyier of CSS Tricks has recorded a great screen cast, watch it, you will be sold too.

10 Responses
Add your response

"how could the letter 'A' be read by a screen reader as say, an RSS icon for example"

So, how?

over 1 year ago ·
over 1 year ago ·

yeah icoonmoon is awesome and fontello is exploding ^^ found also this on github

over 1 year ago ·

You might also want to check out - a hosting service for icon fonts.

over 1 year ago ·

In fact, if you want to push the thing, for the usability issue, you can use ligatures for SEO and accessibility issue. So like "home" will become the home icon, "printer" the print icon. Thanks to ligature, it's no more letters but combination of letters, so words, that will become icons.
Still the best way to handle that is Illustrator + Fontlab.

over 1 year ago ·

I also prefer font awesome:
It enhances Twitter Bootstrap!

over 1 year ago ·

@olilish Love that article. Semantic icon fonts ftw. Icon fonts are colorable too so they make a lot of sense for templates with different themes and such.

over 1 year ago ·

Love this! I am a big fan of font awesome.

over 1 year ago ·

@naholyr Pictos has a great overview here:

Basically, the trick is that pseudo elements (:before and :after) will not be read by JAWS and other screenreaders and do not add additional unsemantic content to the markup. If icon fonts are used as a progressive enhancement, they will add to the experience and not add content that doesn't belong there.

That said, we still need to keep accessibility in mind. Markup like <a href="#"><span class="icon"></span></a> is not good practice, as there is no content there when the icon does not load. Always think of your base, no frills user, and if you must, use tricks like text-indent: -999em; to remove content from the display of an element but maintain it for screenreaders.

over 1 year ago ·
over 1 year ago ·