Make your own, custom Icon Font in four minutes (perfect for Retina/HD)
Above is a screencast showing how this is done. However, in case you don’t want to watch that, here’s the text version…
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.
-
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.
The font packages that you export, all comes out with iconmoon as font name. Can you rename the fonts? (I can only see one iconmoon font at in Font Book)