Webfonts are a great alternative to images when you’re adding icons to your web page. My recent article Webfont Icons: an Alternative to Images explained how you could load a single font file such as Iconic and apply icons using CSS pseudo elements, e.g.

	font-family: "IconicStroke";
	content: "r";

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

There are several advantages to this approach: webfont icons work in all browsers (including IE6), can be scaled to any size and hundreds can be packed into a single efficient font file.

Unfortunately, you rarely need hundreds of icons. It’s a little wasteful to use a large font file when you only require a handful of icons. The situation is made worse if you require a few icons from several different font files.

They also introduce a minor accessibility issue. Adding content using CSS pseudo elements can trigger screen readers to speak the text. In our example above, you could hear your PC stutter “r-RSS feed”.

IcoMoon to the Rescue

IcoMoon is a fabulous HTML5 application which solves these problems for you. It allows you to:

  • browse and search 600+ IcoMoon icons
  • upload single SVGs or your own font packs (SVG fonts are supported)
  • edit icons directly in your browser
  • add any number of icons to a font collection
  • assign those fonts to any characters, e.g. rather than using ‘r’ you could use a space character to ensure nothing is ever read aloud
  • download example code and tiny bulletproof font stacks containing the icons you selected

To start, visit the IcoMoon app at keyamoon.com/icomoon/app/ where you can upload, browse and search icon collections. You can select or deselect any number of icons by clicking:

IcoMoon icon browsing

Hover over any icon and click edit to perform basic editing such as rotating, mirroring and shifting. You can also download an icon as an SVG, edit it in Illustrator, InkScape or svg-edit, and upload the changed version:

IcoMoon icon editing

Once you’re happy with your icons, click the F icon in the black bar at the bottom of the screen to view and rearrange your selection. You can assign an icon to any character by clicking the top bar and pressing the associated key or clicking the bottom bar and entering the Unicode index number:

IcoMoon icon pack saving

Finally, click the Download Font icon in the bottom black bar to grab your custom ZIP file.

IcoMoon is one of the most useful web development applications I’ve seen and it eradicates several issues associated with webfonts. Highly recommended.

Tags: CSS3, HTML5 Dev Center, HTML5 Tutorials & Articles, webfonts
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 written more than 1,000 articles for SitePoint and you can find him @craigbuckler

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

  • http://dorward.co.uk David Dorward

    After playing around with the site and getting “Unpronounceable” spat out by my screen reader on every icon, I’m going to stick to techniques that allow me to use alt text instead of pseudo-not-text.

  • Michael

    Thanks a lot for this article!!

    FYI: The screenshots seem to be a little different than what I see.

  • http://juleswebb.com Jules Webb

    Loved playing around with IcoMoon. Nice find, thanks!

Special Offer
Free course!

Git into it! Bonus course Introduction to Git is yours when you take up a free 14 day SitePoint Premium trial.