Date: 16 July 2013
Chris Coyier does an awesome job of demonstrating font icons, explains why they’re great, and why you should be using them, here. If you’re already converted, and know that you want to use them, but don’t know how…read on.
Since reading Chris’ article about a year ago it’s been a rollercoaster ride for me, learning not only how to use available kits on the internet, but also how to create my own. It’s fantastic that we have resources such as Font Awesome, Fontello, Symbolset and IcoMoon that give us so many fonts, but I wanted to dig deeper. I wanted to get under the hood of font icons, and reveal the magic! This was in part because of my own curiosity and an innate need to know how and why things work, but also because I thought I could use font icons for the company I was working with, Rentalcars to better streamline their production of new icons, and to bring higher quality and consistency across all of the platforms they output to (mobile apps – retina and non-retina, desktop site, tablet site, etc.).
I started off like most designers would – I played around with an existing solution. I grabbed a download of Font Awesome and got digging. Using the “i” tag felt weird at first, but as one commenter on Stack Overflow puts it when asked if it’s bad practice “Awful practise. It is a triumph of performance over semantics.”. It works, and it works well. There are other ways of doing it, for example you could just use “span” also, which is what IcoMoon have decided to roll with.
Once I’d gotten my head around how to use a fully fledged font icon kit, it was time to find out how to build my own. The reason I didn’t want to use an off the shelf solution was simply because at Rentalcars I knew we’d be adding new icons on a regular basis. I didn’t want to have to rely on a 3rd party to provide me with updates, so I decided to keep everything all under one roof – my roof! Below is a breakdown of the stages I went through.
Dave Gandy created Font Awesome, and has posted a handy guide on how to contribute new icons to him to include in the set (note, I can’t find Dave’s original post, so have linked to showcase.com). I based all of my icons on the suggested 60px x 56px artboards in Illustrator, and kept strokes at the suggested 4 pixel multiple where possible. These two guides are golden rules as I have found along the way – setting your artboard to 60 × 56 keeps you focussed on the detail that’s needed, without extra stuff you don’t need. Sticking with strokes that are multiples of 4 make sure your icons don’t distort at smaller sizes. Top tip: turn “Snap to Grid” and “View Pixel Grid” on – it’ll help you stay accurate when making your icons.
I had a lot of fun making my icons in Illustrator. I exported all of my artboards to SVG, but needed someway to turn them into an actual font. I’d read that Fontforge was a particularly powerful free piece of software, so gave that a go. After a good while wrangling about in Terminal (I believe Fontforge is Python based, so can’t be installed “easily” on a Mac like other programs) I finally managed to get it installed on my Mac, running OSX Lion. Before you go away and get hold of Fontforge, I would say that for this, don’t bother! Although I did manage to create a basic font in Fontforge, it was so much hassle, and I later found a much, much easier way of doing things. Not to mention that when I upgraded my Mac to Mountain Lion, Fontforge no longer played ball, and simply would no longer start.
I also tried InkScape, which was another funny one to get installed. InkScape has an SVG Font Editor built in, which was actually really nice, especially as it’s a free bit of kit. The only downside for me was that the SVG Font Editor is only really any good if you plan on creating a Roman alphabet-based font. In Inkscape you attach a keyboard character to your icon, but for me I could see that I would potentially run into many more icons in my kit than there were keys on a keyboard (including shift-keys).
It was at about this point that I learned about Private Use Area (or PUA) codes. All characters in the alphabet have a unicode attached to them. So all letter A’s have a code of U+0040, B has a code of U+0042, and so on (upper and lower case are different, by the way). These numbers are reserved, and if you’d like to create your own Roman alphabet-based font, you can use these codes to match other fonts. However, if you plan on creating, say a font icon kit, that doesn’t relate to the Roman alphabet, you need to use PUA. PUA is a list of codes that are available for you to apply to whatever you like, and they don’t match up with any existing alphabet. Best of all, there are 65,534 codes available – I’m pretty sure I won’t come up with that many icons, and if I do I’ve done something wrong with my life.
I was in desperate need of an alternative to Fontforge and InkScape that would allow me to use PUA. I’d come so far (and had committed a fair amount of time to learning about font icons, and felt like I was so close to completing my own. I couldn’t stop now!). I stumbled across IcoMoon, which is an alternative to Font Awesome. What I didn’t notice in my earlier research though, was that IcoMoon also features a “do it yourself” app, where you can not only build your own font icon kit based on already available icons, but you can upload your own SVG’s and create your own kit that way. Amazing! The IcoMoon App was the god-send that I’d been searching for (thanks to Keyamoon for creating it). It’s very self explanatory, so have a go. In summary, all you have to do is click the “Import Icons” red button at top left, select the icon SVGs you created earlier, and add them to the list. You’ll need to click on all of the icons you want to include in your kit (this is great, if you have thousands of icons available, but only want, say 10, you can just select the ones you need. Brilliant for keeping file sizes down). Once you’ve selected the icons you want, click the “Font” button at the bottom of the screen. A new screen loads to show all of your icons. You’ll need to tell IcoMoon that you want to use PUA, so click on the arrows at the top right of each of the icons and select “PUA”. IcoMoon will assign a private use code for you. Once you’ve finished uploading and calibrating your icons, it’s a good idea to “store the session”. There’s a button at the bottom right of the screen that looks like a database icon (3 discs, one on top of the other). Click that, and select “Store Session”. This will download a JSON file to your harddrive, so that next time you come back you can load exactly the same settings without having to go through everything again. This is particularly handy when adding new icons to a set, to make sure the same PUA doesn’t get assigned to a different icon (not great if you’re updating a font that’s in production!). After that, just click on the Download button at the bottom of the screen and you’ll get a nice .zip file that contains all of your fonts and example files to get you rolling.
That’s about all you need to know, intrepid explorer. The best thing you can do from here is go and unzip that download from IcoMoon and start trying to break things. See how everything links together, notice how each icon uses aria-hidden=“true” to avoid screenreaders spitting out a load of nonsense, and so on. It’s all gravy from here.
Let me know what you think in the comments.