Welcome back! So in part one, I had some vector images of icons, and I converted them to square, one-color .svg files.

To use these icons as characters, I need somehow to turn them into a font. Enter IcoMoon.

IcoMoon is great service that provides a lot of slick icons to cover pretty much any situation, but they also have an amazing free web app that lets you import vector files, assign them to Unicode values, and export font files.

When you start up their app, they give you several sets of icons to pick and choose from. It’s like the bulk candy aisle, or a Mongolian barbecue. I was already very familiar with the FontAwesome icons (it’s nice not to have to look up the class name when you’re writing your markup if you already know you need a <i class=”fa fa-beer”></i>. Actually, I don’t get to use that one nearly enough).

I wanted to append my custom icons to FontAwesome’s existing set of icons, so I needed to get those FontAwesome icons into IcoMoon. Assuming you’ve already downloaded and unzipped FontAwesome, in the IcoMoon app click the Import Icons button and navigate to the FontAwesome fonts folder. Select the fontawesome-webfont.svg file to upload. Boom, there are all of the FontAwesome icons.

Follow the same steps to import the .svg files you made back in part one. Hey, look! Your icon’s on the internet!

Now you get to assemble and package your font. Using the IcoMoon select tool, you can pick and choose from the FontAwesome library (or any of the other libraries on there) and add your own. When you’ve selected everything you’re going to need, click the Font button at the bottom.

On the next screen, IcoMoon assigns default Unicode values and names to your icons. You can change the default Unicode mappings if you want (FontAwesome puts all of their icons in the block starting with f000 to keep them from overlapping with standard characters). You can also give each icon a name that IcoMoon will use to generate CSS rules. I would recommend making use of that by giving each icon a good, descriptive name. If you chose to upload the FontAwesome font, you’ll have to rename the icons you picked (unless you do something kind of questionable, which I’ll get into below, in the danger zone). Now download your font.

​

Unzip and take a look at the folder you just downloaded. Similar to FontAwesome, it has a “fonts” folder, and the conversion to other font file formats is already done! You’ll also see a style.css file. If you open that, you’ll see how to import the font file using @font-face, and then how to actually use the icons in your markup. Icon fonts typically make use of the :before pseudo element. The markup you write to insert an icon, like <i class=”icon-foo”></i>, is just a placeholder in front of which the browser will insert your icon character.

You can stop right here and be good to go. Add the CSS file and fonts folder to your project, making sure the path to the font files stays accurate, and use the classes that you defined in the IcoMoon app to start inserting icons.

The IcoMoon stylesheet doesn’t care what type of element you use in your markup to represent your icon, but typically you’ll want to use an inline element. Bootstrap uses <span>; FontAwesome suggests <i>, which is really a toss-up in terms of semantics (“i” doesn’t stand for “icon,” but it’s easy to remember, and you should be using <em> for italics, or emphasized, text anyway).

— Begin Danger Zone —

Now in my project, because I wanted to append my icons to the FontAwesome set and didn’t want the hassle of renaming all of the FontAwesome icons I uploaded, I took a few unorthodox extra steps that I don’t necessarily recommend, but they might be instructive for you. Be warned: editing the FontAwesome source files will prevent you from smoothly upgrading in the future!

This is using version 4 of FontAwesome and LESS — your files might be structured differently.

In my font-awesome-4.* folder, I replaced the fontawesome-webfont.* files with my custom font files, then changed the filenames in path.less accordingly (as well as the @fa-font-path in variables.less, if necessary). Then in variables.less, I added new entries for my custom icons, following the pattern already established:

@fa-var-my-cloud-icon: "f200";

Of course, now you have to add those variables to the icons.less file:

.@{fa-css-prefix}-my-cloud-icon:before { 
    content: @fa-var-my-cloud-icon; 
}

By doing this, I’ve essentially made my own additions to FontAwesome, and I can use them as if they were native FontAwesome icons: <i class=”fa fa-cloudlock-icon”></i>, without having to add a second library or worry about different class names or prefixes. But I’ve also locked myself into this custom version of FontAwesome. If I wanted to upgrade, I would essentially have to do the entire process over, starting with uploading the new fontawesome-webfont.svg to IcoMoon. And that’s why you shouldn’t customize tools that are under active development 🙂

— End Danger Zone —

So there you have it: you created icons from vector images, packaged them into a font, and generated CSS rules that will let you insert your own sweet custom icons into your UI projects. Thanks for reading!

photo by mahalie