Create Your Own Font Awesome Icons

I have been using Font Awesome for a while now. We have done some tweaking to it and made it work for our project.

Unfortunately, Font Awesome is heavy. It comes with a ton of icons, many of which we don’t use. On top of the heavy file size, sometimes we have to settle for an icon that is close to what we want, but not perfect. While Font Awesome is indeed awesome, it has some flaws — so we will create our own!

Font-What-Now?

Font Awesome is a vector icon set that is inside a font. The characters in the font are your icons, and they can be applied via CSS. Vector icons can scale when sized up or zoomed into, and they can be tiny in size. With hi-res (retina) displays on many devices, this is a good thing to use in your web apps. The only downside is that the icons can only be one color, since they are a font — although you can play with some CSS3 magic to give outlines, drop shadows, and more.

Creating Our Own Icon Set

Font Custom is a tool to convert SVG images into your own Font Awesome-esque font icon set. It requires a couple packages to install from brew or apt-get (Mac and Linux only right now) and then a gem to watch a directory and build the font (full setup instructions).

Once it’s installed, you can set it to watch a directory for SVGs and recompile the font when it sees changes or you can run it once to build the font from a given directory. The output will be a set of files that include various versions of the icon set for cross-browser compatibility and the CSS with the classes reflecting each icon name in the images directory (cow.svg would match to the class icon-cow).

Once you have Font Custom build icon set, you are almost done. Include the CSS and font files in your project and add the class of the icon you want onto an DOM element. Presto, your own custom vector icon set!