z8qucg
Last Updated: July 27, 2016
·
3.422K
· olilish
Avatar

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.

Say Thanks
Respond

10 Responses
Add your response

2622
396445b6e14727dcb6b3d6a66d52b567

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

So, how?

over 1 year ago ·
2633
Avatar
over 1 year ago ·
2638
1ac40ea49b742e19deae3940d1228472

yeah icoonmoon is awesome and fontello is exploding ^^ found also this on github https://github.com/webfacer/Font-Awesome

over 1 year ago ·
2640
13a9550a854af911366d9f5deb785cd6

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

over 1 year ago ·
2650

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 ·
2654
61138af7fb7de1301cd30a027883946a

I also prefer font awesome:
http://fortawesome.github.com/Font-Awesome/
It enhances Twitter Bootstrap!

over 1 year ago ·
2707
Cory simmons 700

@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 ·
3259

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

over 1 year ago ·
4418
Headshot cropped800

@naholyr Pictos has a great overview here: http://pictos.cc/articles/using-icon-fonts/

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 ·
5728
0ecf8efc55cb5b0fbd80136f29afdea4
over 1 year ago ·