Webfont Icons: an Alternative to Images

Let’s be honest, creating dozens of tiny icons in a graphics package isn’t fun. Even when you’ve gathered a decent set, you end up managing dozens of tiny files or creating image sprites and slicing them in CSS.

Fortunately, HTML5 provides us with another option: webfonts. A font set can contain graphical icons and character sets. Wingdings is the most well known but free fonts such as Iconic can be more useful and provide example HTML and CSS code.

View the webfont icon demonstration page…

Once you’ve found or created a suitable font, you’ll need to convert it to a number of formats to ensure good cross-browser compatibility. The @Font-Face Generator at fontsquirrel.com does the hard work for you and supplies a ZIP file containing all the fonts and CSS code. The font is then imported at the top of your CSS file, e.g.


@font-face {
	font-family: "IconicStroke";
	src: url("iconic_stroke.eot");
	src: url("iconic_stroke.woff") format("woff"), 
	url("iconic_stroke.ttf") format("truetype"), 
	url("iconic_stroke.otf") format("opentype"), 
	url("iconic_stroke.svg#iconic") format("svg");
}

It’s possible to add icon characters to your HTML file, such as using an ‘r’ for Iconic’s RSS icon. However, that may confuse people using screen readers so CSS pseudo elements are a safer option, e.g.

Your HTML:


<a href="rss.xml" class="rss">RSS Feed</a>

Your CSS:


.rss:before
{
	font-family: "IconicStroke";
	content: "r";
}

The Advantages of Webfont Icons

Webfonts can be an ideal alternative to graphics:

  • fonts can be scaled to any size, use any color and have CSS effects applied
  • webfonts offer good cross-browser compatibility and even work in IE6
  • a single font file can be more efficient than multiple images

The Disadvantages of Webfont Icons

Webfonts may not always be appropriate:

  • font characters are single-color (although CSS3 effects can help)
  • generating fonts is not as easy as PNGs or SVGs
  • image file sizes will be smaller if you only require a few icons.

Overall, there’s little to dislike about webfont icons and they could cut development time. Have you used them in any of your projects?

View the webfont icon demonstration page…

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://somerandomdude.com/ P.J. Onori

    Thanks for the article, I’m glad to see more writing on this subject.

    There is another disadvantage to the current implementation of my Iconic font set – the icons were arbitrarily matched to unicode characters. Philip Shaw came up with a much improved method which I am currently using (and will be writing about in the next week or two).

    The hope is to help rally people around a standard so that we can begin seeing icon fonts available at font hosting services like TypeKit. Fingers crossed…

  • http://mikeritteronline.com Mike Ritter

    Made me look back to using good ol’ Webdings and Unicode fonts. I hadn’t thought about this in a long while. Your suggestion of using pseudo-elements has my mind racing to ways to really implement icons in a new way.

    • http://mikeritteronline.com Mike Ritter

      Note: another option for screen readers is to place the symbol in an abbr tag

      • http://joezimjs.com Joe Zim

        Wonderful suggestion!

  • R Sims

    I’m intrigued! But the demo page link is returning “server not found”…?

    • http://www.optimalworks.net/ Craig Buckler

      It appears to be there? Perhaps there was a temporary glitch…

  • Ben Truyman

    Two things to point out:

    – Using alphanumeric characters mapped to icons in a font can hurt accessibility and create strangeness with regards to SEO depending on your implementation. A screen reader will read out the literal letter or number for every icon.
    – While the custom fonts will work in IE6 and IE7, your implementation using the `:before` pseudo element will not.

    Other than that, this is a great way to implement iconography without the use of something like SVG — allowing them to easily scale and be recolored.

    • http://www.webhipster.com Vincent Young

      Ben, these are good points. I have noticed the latest stable releases of NVDA/Firefox exhibiting this behavior of announcing the alphanumeric content in CSS.

      Seems where this could possibly make sense is when the icons are mapped to an equivalent Unicode entity where the icon image is similar to the Unicode image, but even then, can be a bit sketchy in terms of accessibility/semantics.

      A good article/discussion on the subject: http://jontangerine.com/log/2010/08/web-fonts-dingbats-icons-and-unicode

      Other techniques such as, SVG/VML/Canvas should generally be explored first for scalable images.

  • http://www.web3box.com Daniel Gheorghe

    This seems great. However I have a question that I hope you guys can answer. What impact would this have on search engine optimization. Regarding the fact that CSS 3 is needed to make gradients and other effects this is really a drawback for my web design work.

    • http://www.optimalworks.net/ Craig Buckler

      SEO could be affected by:

      1. Page weight. If using a font reduces page weight it’ll be a marginal SEO benefit.

      2. Image use. Google likes to see img tags or other media on the page (as opposed to plain text-only). If you replaced all your images with webfonts, you might be downgraded a little.

      However, you’d mainly use webfonts to replace decorative icons which would have been defined in CSS. I’d be amazed if there were any noticeable impact on SEO.

  • http://itmitica.com/en/ itmitica

    If webfonts work in IE6, how is that a HTML5 improvement?

    Is there a way to block custom fonts now, aside from using add-ons like NoScript? I wouldn’t want potentially offensive glyphs loading up on my 70 yrs old mother’s computer, right?

    This is design. Do these glyphs render good enough or am I trading downwards for the sake of novelty?

    • http://www.optimalworks.net/ Craig Buckler

      Remember that standards don’t become standards until at least two vendors implement a technology. IE has supported downloadable fonts for more than a decade but copyright issues meant the technology remained in limbo for much of that time.

      As for blocking fonts, it’s easy with Adblock and similar tools. Simply reject .woff, .ttf, .otf or .eot files. But do you block every image on your mother’s PC too? I’m sure if you look hard enough you’ll find potentially offensive JPGs on the web.

      • http://www.itmitica.com/en/ itmitică

        I didn’t know Adblock can do that! Nice one, thanks :)

        I see what you’re trying to do here ;) But no, images and webfonts are not the same. Not at all. The fact that you can easily build a non-standard webfont, that replaces glyphs that should be there but actually display completely different words with completely different meaning, the fact that a screen reader and a visual representation of those words can be different, it’s not the same with putting an image in a web page and have a wrong description for it.

        Imagine this: “Welcome” in a standard font becomes something offensive like “Yousuck”. It makes room for a new kind of online malware…

      • http://www.optimalworks.net/ Craig Buckler

        Mmm, I’m not convinced it would be malware but it could have an impact on SEO. It’d be difficult to do though – you’d need multiple fonts to ensure messages translated perfectly.

      • http://www.itmitica.com/en/ itmitică

        I’m sure some minds will look at this as a fun challenge :)

  • http://joezimjs.com Joe Zim

    I don’t this would come in too handy for my current website (http://joezimjs.com), but I am working on an app that would probably benefit from some nice little icons. I’ll have to see how it works out.

  • Gar_onn

    I made a tool to make a SVG font: http://fontspot.co.cc/ converts SVG paths to a SVG font that you can convert at fontsquirrel.com/fontface/generator