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.
Written by Oli Lisher
Related protips
10 Responses
"how could the letter 'A' be read by a screen reader as say, an RSS icon for example"
So, how?
@naholyr Using ARIA - check this out: http://pictos.cc/articles/using-icon-fonts/
:)
yeah icoonmoon is awesome and fontello is exploding ^^ found also this on github https://github.com/webfacer/Font-Awesome
You might also want to check out weloveiconfonts.com - a hosting service for icon fonts.
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.
I also prefer font awesome:
http://fortawesome.github.com/Font-Awesome/
It enhances Twitter Bootstrap!
@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.
Love this! I am a big fan of font awesome.
@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.
Make your own: http://fontcustom.com
Or if you use grunt: https://github.com/sapegin/grunt-webfont
Have a fresh tip? Share with Coderwall community!
