Above is a screencast showing how this is done. However, in case you don’t want to watch that, here’s the text version…

Update: turns out Chris Coyier had released a screencast on the same subject a couple of days before this. If you are looking for something more in depth, I’d recommend checking his screencast out: http://css-tricks.com/video-screencasts/113-creating-and-using-a-custom-icon-font/

I’ve seen a few posts around the net discussing how to make a Web Icon Font that you can use with @font-face in CSS (if you aren’t sure why this is a good thing just click here – I’ve done a few posts here talking about them). However, all the techniques seem a little long winded (there’s every chance they know something I don’t though).

Anyways, here’s what I think is the quickest and easiest way to create your own custom Icon Font for use in your projects…

  • Export an SVG of the shape you want to use. In the screencast, I’m using Illustrator CS4 as it has decent SVG export options. My versions of Photoshop and Fireworks don’t. Whatever, you use, you’ll need an SVG version of your shape.

  • Go to http://keyamoon.com/icomoon/app/#font

I can’t stress enough how brilliant this web app is! I bought the IcoMoon font pack when it came out, if you use this app, and haven’t bought the fonts, I’d encourage you to get the guy a beer (or 10) by donating: http://keyamoon.com/icomoon/#toHi.
  • Click the ‘Import Icons’ button and browse to the SVG you just exported.

  • Continue to add your custom SVG’s to build up your own fonts or make a hybrid set with some of your own and some from the IcoMoon sets. When you have all the icons you want selected, click ‘Font’ in the bottom of the screen.

  • You’ll now have a summary screen showing your Icon Fonts and the key mappings. You can edit the keys that represent each Icon by clicking in the relevant box and entering a new symbol if you wish. When happy, click ‘Save’ in the bottom toolbar.

  • A zip file will be saved to your computer, deflate it and there is a CSS file containing all the CSS you need to use the font in a variety of ways and an index.html showing you your symbols and the keystrokes that make them.

  • That’s all there is to it! You can now copy all the font files (SVG, WOF, EOT, TTF) where you need them in your project and custom resolution independent icons are there for you and your users to enjoy.

My latest book, 'Enduring CSS' is out now

Get $5 off HERE ↠

Write and maintain large scale modular CSS and embrace modern tooling including PostCSS, Stylelint and Gulp