Posted on by & filed under Content - Highlights and Reviews, Mobile Development, Web Development.

Icons are commonly used across the web, whether for conveying concepts without words, or just to enhance the visual design and make for a more pleasant experience. They’re especially useful for sites or apps that are optimized for mobile devices, where screen space is limited.

More often than not, icons are made using bitmap images like PNG or GIF, but this is not without its drawbacks: you have to use an image processing program such as Photoshop every time you want to make something as simple as a change of color, and on scalable or high-resolution devices they can appear quite pixelated.

In recent years browsers have introduced support for SVG graphics, which have the advantages of being scalable and easier to change color; but as older browsers don’t have any way to display SVG, using them for important icons isn’t ideal.

Enter CSS Web Fonts: they’re cross-browser, scalable, adaptable, and very easy to implement, which makes them great for use as icons. Their only real drawback is that they can only be a single color, which may or may not be an issue depending upon your design. That aside, they’re a very good option.

Getting Started with CSS Web Fonts

The first step is to choose a suitable icon font. I’ve gone for Modern Pictograms at Font Squirrel, but there’s a useful Delicious stack which shows many alternatives. When you’ve chosen your font you need to make it available in your CSS, using @font-face:

For clarity I’m using an abbreviated rule here, but depending upon which browsers you’re supporting, you may need to include more font formats. If that’s the case you’ll need to use a much longer rule.

Once the icon font has been defined it can be used in your font stacks just like any system font, so the next step is to choose which character will be used as the icon. In the following example I’m going to use the ‘external link’ icon, which in my chosen font is a lowercase ‘o’, and I’ll apply it (using the content property) with the generated pseudo element, ::after, like so:

This displays the icon I requested immediately after the element that I used as my selector; the result of which is shown in the following figure.

The CSS Font Icon Advantages

For a further illustration of the advantages of font icons take a look at the next figure, where I have three list items, each of which is a different color. Note how the icon inherits the color from its parent, so it matches the color its attached to. I would have had to make three separate PNG images to get the same effect, but you can imagine how much easier this is if you ever have to tweak or change the colors of your design.

The other big advantage of using icon fonts is that they scale up or down without any loss of definition. In the next figure I show the result of using the same icon but on an element with a larger font size. Like before, the icon inherits the color, but it also inherits the size, thus removing the need to make more PNG images.

Advanced Techniques

Quite apart from the advantages it brings in maintainability, using an icon font can mean faster page load times since there’s no need to download multiple images. To make it even faster for some users you can choose only a subset of characters to load (if you know their Unicode character numbers) using the unicode-range property of @font-face, as in this example where I’m loading only the single icon I need:

That’s currently supported in many WebKit browsers such as Chrome and Safari, but it is part of the CSS3 Fonts specification so support should land in other browsers in the near future.

If you don’t want to use other people’s icons you can go a step further and create your own icon font. That’s somewhat beyond the scope of this article, but there’s a concise guide to making custom fonts on Wired’s How To wiki.

Summary

Using web font icons is a simple, solid technique, and a definite addition to every developers box of tricks. Many sites have already begun using fonts as icons (we use them extensively on the site I currently work for, Top10.com, for example), so there’s no reason you can’t start to use them to enhance your sites today.

Safari Books Online has the content you need

Here are some good CSS3 resources found in Safari Books Online:

The Book of CSS3, by Peter Gasston and author of this post, uses real-world examples to teach developers the fundamentals of the CSS3 specification, highlighting the latest developments and future features, while paying close attention to current browser implementations. Each chapter examines a different CSS3 module, and teaches the reader to use exciting new features like web fonts, background images, gradients, 2D and 3D transformations, animation, box effects, and more.
With Head First HTML with CSS & XHTML, you’ll avoid the embarrassment of thinking web-safe colors still matter, and the foolishness of slipping a font tag into your pages. Best of all, you’ll learn HTML and CSS in a way that won’t put you to sleep.
With Head First HTML5 Programming introduces the key HTML5 features — including improved text elements, audio and video tags, geolocation, and the Canvas drawing surface — and uses concrete examples and exercises to apply and reinforce these concepts.
Whether you need an example-driven programmer’s guide or a complete desk reference, JavaScript: The Definitive Guide is the most authoritative book on the language that runs the Web. The sixth edition offers comprehensive coverage of ECMAScript 5 (the new language standard) and also the new APIs introduced in HTML5.
The Definitive Guide to HTML5 provides the breadth of information you’ll need to start creating the next generation of HTML5 websites. It covers all the base knowledge required for standards-compliant, semantic, modern website creation. It also covers the full HTML5 ecosystem and the associated APIs that complement the core HTML5 language
Sams Teach Yourself HTML, CSS, and JavaScript All in One brings together everything beginners need to build powerful web applications with the HTML and CSS standards and the latest JavaScript and Ajax libraries.
CSS: The Missing Manual, Second Edition combines crystal-clear explanations, real-world examples, and dozens of step-by-step tutorials to show you how to design sites with CSS that work consistently across browsers. Witty and entertaining, this second edition gives you up-to-the-minute pro techniques.

About the Author

  Peter Gasston is a web developer, writer, public speaker, and author of The Book of CSS3. He blogs at Broken Links and tweets as @stopsatgreen. He lives in London, England.

Tags: CSS, Fonts, Icons, SVG, Web Fonts,

3 Responses to “Using CSS Fonts for Adaptive Icons”

  1. stephenh

    Typicons is a free web font that is available to use for this purpose. The CSS and original vectors are also included, all of which you can find at typicons.com

Trackbacks/Pingbacks

  1.  Practical CSS Tips on the Safari Books Blog - Broken Links