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 via @font-face. A tutorial I have read. Any ideas on how to go about creating these?

Answer

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!