: How do you create Icon Fonts? Ive seen many examples of people using icon fonts but I am wondering what is the best way to execute this process. An example of icon fonts: Raphaël Icon-Set

@Eichhorn212

IconMoon seems to be the best tool out there (previously mentioned on this thread by plainclothes).

That said, this new PS Icon Web Font Creator plugin seems very promising too as it would allow you to create the fonts directly from Photoshop.

Vote Up Vote Down

@Lengel450

I recently did this in FontForge, inspired by this article by A List Apart. While you could theoretically put the glyphs anywhere, it's probably preferable to put them into Unicode private use areas, because that way if the font doesn't render you're not stuck with a letter 'a' or whatever.


Install FontForge...good luck; that's half the battle. Once you're in and you have a new font file up and running, go to Encoding > Reencode > ISO 10646-1 (Unicode, BMP) to show the private use glyphs. Private Use is U+E000 through U+F8FF.
Put in your glyphs. There are different ways to do this; I did them in Illustrator, exported to SVG, and imported. Then, once you have 'em in your space, export as TTF.
Use FontSquirrel's Webfont Generator to generate the webfont version. Be careful, though...FontSquirrel's generator will subset the font and cut out the private use glyphs unless you tell it not to. Go into the expert options and select "No subsetting".
Set up your CSS font-face as you ordinarily would.
Implement! How you implement depends on what you want to do; CSS3 content is a good solution. Use Unicode HTML entities to display your content...U+E000 is E000 in CSS and  in HTML...use a converter to help. A hex to decimal converter will help with converting to HTML.


Hope this fills in some gaps!

Vote Up Vote Down

@Phylliss782

There are a fair amount of options on the market now for building fonts. From your question, it appears that you're after webfonts in particular. Most of the modern tools will create a webfont for you, or you can run a desktop font through FontSquirrel's webfont generator.

My preferred process is paper > Illustrator > FontLab. There's a rather detailed procedure for the last jump there, but it's not hard once you have a template set up.

RoboFont is another professional tool that has emerged in the last few years to dethrone FontLab's dominance. Other popular options on the cheap are FontForge and FontCreator.

Update
I almost forgot IcoMoon: the first custom icon font builder, which allows users to select the icons they need, and make them into a font.

Vote Up Vote Down