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?
