Skip to main content

Webfont Icons: an Alternative to Images

By Craig Buckler

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 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:

	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…

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

Integromat Tower Ad