In part 1 of this series, I talked about how to get up and running with IcoMoon, generating an icon font, and using it.
In this second post, I want to get into the workflow that I’ve figured out that makes working with icon fonts a lot of fun.
Note: This post was updated on December 18th, 2013, to use new screenshots that show the recent redesign to the IcoMoon App.
I’ve become a huge fan of using icon fonts recently. I love the fact that graphics elements that are implemented this way are vector based & stylable with CSS. It makes them really easy and flexible to work with.
One of the things that you will have to confront, though, is how to actually get an icon font that you can use. That is where IcoMoon comes in. It is an online service that lets you generate a custom-built icon font, using icons that are either open licensed or for-pay.
I’ve used IcoMoon on a couple of projects lately, and wanted to share what I’ve learned. I’m going to break this into three seperate posts:
However, in learning how to use them, I had to rethink how I wrote markup. For years, I’ve been using background images via CSS for the kinds of visual elements that I now wanted to use an icon font for. That meant actually inserting HTML elements for the icons – and not relying on CSS alone. I would need to insert something like:
<span aria-hidden="true" data-icon=""></span>
That means more verbose markup, but is something I can live with.
The bummer is when you’re in a situation where inserting new markup is either impossible or at least very painful. I’m thinking of things like manipulating the menu markup generated by a CMS (e.g. it can be a royal pain in Drupal).
What I discovered is that you can insert an icon, using an icon font, purely in CSS. It just takes a little advanced CSS and a special re-writing of the icon unicode characters for the icon.