Creating Font Icons

Did you know you can add images to your font libraries without much effort?

Icon fonts contain svg images which is different from regular fonts that just use numbers and letters. Web designers use font icons with css to resize, change colors, add drop shadows, etc. Anything you can do with a regular font you can also do with font icons.

There are many benefits to using font icons as opposed to regular svgs. They are small (load quickly) and are supported in all browsers. The main benefit is how you manage them. Instead of having a folder full of svg images that you have to basically remember, all the images are in a collection so you can manage them all in one place. If you decide to change the colors across the entire website you can do that with just one line of css.

Still reading? Ok then lets move on to how.

You can use icomoon to manage font icons. You can select any images you want then export them for use in your web project. It is a really powerful open source tool but I won’t get into too many details about it here. Just sticking to the basics for now.

One of the great features is how you can add your own images (covered later below). Once you have created your perfect font icon collection you export the files as a zip which will contain all the font files, css and most importantly a file named “selection.json”.  This file can be used to reload the collection on icomoon, so you can save it in a repo and share it with other team members.

To load an icon collection into the icomoon app you simply drag the selection.json file to the icomoon page as shown in the image below.

icomoon_selections_file.png

To create our own custom font icons we need to create svg files. If you do not know how to use Illustrator or similar SVG editing apps, Vectormagic is a good tool for converting raster images to svg images. Even if you are good with SVG editing apps, vectormagic can still save you a ton of time.

When you have an SVG image that you are ready to use, you may still need make some changes. The SVG will need to have a combined path. You can do this with Inkscape or Illustrator. In this article I will cover Inkscape, but for Illustrator here is an excellent article.

Creating a Combined Path SVF with Inkscape

  1. Open your svg image in Inkscape
  2. Select all
  3. Object > Ungroup
  4. Path > Union
  5. Path > Combine
  6. File > Clean up document
  7. Save as > Plain SVG

Making a Ring around an Icon in Inkspace  

  1. Create a large circle with one color
  2. Create a smaller circle with another color
  3. Lay the small circle on top of the large circle and center it 
  4. Select all
  5. Path > Difference
  6. Save as > Plain SVG 

Once your SVG is ready to add to icomoon, you can import one or more icons to your icomoon set with the Imort Icons button.