Photo of Nathan Shubert-Harbison Nathan Shubert-Harbison

Main content

Icon fonts, the new hotness for a reason

Although icon fonts aren’t a new idea (remember Wingdings?), their use has seen a large resurgence lately. Up until @font-face support become widespread, the only way to use typefaces, other than the small handful of web-safe fonts, was to use an image or something nasty like Flash or cufon. Now that’s all changed and we can use 500-year-old typefaces in websites viewed on our 5-month-old mobile devices. But in addition to Garamond, @font-face allows us to create icon typefaces – fonts like wingdings but with more useful symbols.

Why icon fonts are rad

If you read Chris Coyier’s blog CSS Tricks or listen to his podcast Shop Talk with Paravel‘s Dave Rupert, you’ve probably already heard about how awesome icon fonts are. Many other web design/front-end dev bloggers have been raving about them too, and for good reason.

Vector icons

Since your icons are glyphs from a font, the resulting icons are vectors. This provides a several benefits:

Scalability

  • You can scale your icon to any size without having to open Photoshop or Illustrator to save a new image.
  • Your icons will always look fantastic, regardless of pixel density. The same icon is going to look just as good on a device with a high pixel density screen (think retina) as it will on a lower density screen.

Responsive

Sprites can be a bit of a pain in responsive layouts if you want them to scale. You don’t have that problem with icon fonts. You can use something like FitText for your icons or roll your own percentage-based solution.

Affect your icon with CSS

  • Change the colour of your icon
  • Add a drop shadow with text-shadow
  • Apply any CSS transition that you can to text

Performance

Since your icons are all contained in a single file, they are sprites by nature and reduce http requests.

Localization

Just as not all words mean the same thing the world over (think “pants” in the UK vs. “pants” in North America), not all symbols mean the same thing everywhere. Icon fonts make swapping icons based on a language a cinch.

Icon fonts in action

Below are two screenshots of the mobile site Domain7 built for Credit Unions of BC. The icons you see are all from an icon font. Note that the border, background colour, drop shadow from the icon and inset shadow on the background are all created with CSS. As such, we can change any of those properties without changing the icon or loading more assets. In the second screenshot, you see the star icon from the first, but with a different background colour. The only difference between these two icons is CSS.

Where do I get icon fonts?

There are a few good resources out there:

You can also customize your own using the Icomoon App. This tool is also incredibly useful should you only want one icon and don’t want to load an entire font for it, or if you want icons spanning several fonts.

How to use them

Scalable, colourable, transitionable (sure it’s a word) icons?! How do I do that?!

For designers

First step for you is to download a few of these icon fonts and install them. Twitter’s Font Awesome and Zurb’s Foundation Icons are a good start. Next time you need icons in a mockup, try them out! Then when you send your PSDs for development let the developer know which icon font you used. Icon fonts can also be created from svg paths, so if you don’t find something you like, you could create an icon set in Illustrator or gather a collection of symbols from The Noun Project

Semantic problems

Using icon fonts, it’s possible to create some really ugly, non-semantic markup that’ll trip up screen readers. We can avoid this. Here is some ugly markup:

<span class="zombie_icon">Z</span>

Since icons are generally for presentation in nature, they usually don’t need to be in our markup.

Say you have this in your markup:

<ul class="menu">
<ul class="menu">
    <li class="archive"><a href="/archive">Archive</a></li>
</ul>
</ul>
more links...

And say that archive link has an icon to the left side. Rather than put that icon in the markup inside of the li element, a more semantic method would be to apply the icon to the link with CSS as a background image. That way your icon isn’t unnecessarily in your markup. We can do the same thing with icon fonts.

CSS-generated content

CSS’s generated content module (think the content property) solves this problem as CSS generated content isn’t part of the DOM, keeps your markup clean, and most importantly isn’t read by screen readers. You can use the :before and :after pseudo elements to place your icons.

Taking a look at the previous example, we could place an archive icon like this:

.archive a:before {
    content: "a";
    font-family: "The Icon Font";
}

Using the pseudo element on the link makes the icon a clickable part of the link. If, say, we have a colour change on the link on hover, we can apply the same colour to our icon. In Firefox you can even transition that colour change, and transitioning pseudo-elements in webkit is only a matter of time.

You can even have an icon on its own without text by putting the icon name in your markup (this will be for screen readers), and setting the good ol’ text-indent: -9999px; trick on it. And then you can continue to use your icon with generated content. Everyone wins.

Does Internet Explorer 7 win?

Internet Explorer 7 doesn’t support the :before and :after pseudo elements. Fortunately, we can test for these things with Modernizr and provide a fallback if need be. Modernizr will provide you with .generatedcontent and .no-generatedcontent classes on the html element that you can use in styling.

So there you have it! Icon fonts are a new spin on an old idea, and have been drawing a lot of excitement. Why not give it a try on your next project?

This post was originally written for the Domain7 blog.