Tools to create an Icon Font [closed]

Answer 1

If you need font icons, this app is very good: http://fontastic.me/

Answer 2

Inkscape is a great free application for creating graphics with vectors (what modern fonts are made of).

FontForge is a great free application for creating fonts, and can import SVG (a great free vector graphics format) from Inkscape.

Answer 3

Rob, you can start here.

It's not the best example and the template it speaks of is a little bit out of date. You'll have to experiment by moving your icons around the canvas depending on your font baselines.

There's also this long post where he imports his vectors into FontLab. Drawbacks of FontLab are it's $649 price and it's learning curve is steeper than Inkscape. I also found FontLab to be buggy on my OS X install.

On a side note:

Someone needs to make software dedicated to this task...

Answer 4

ive been using an app called glyphs (http://www.glyphsapp.com/) to create typefaces, and recently had a go at an icon font for web use. i imported glyphicons as they come with bootstrap to see what the metrics were they used. so at 20px fontsize theyd match the grid best. etc etc.

i have a custom script to export a css file that creates all classes with the attached unicodes. and another python script that asignes unicode values to custom glyphs (some icons are actually part of unicode, like camera, bell, and things like that)

after that i have to use font squirrel for web font conversion tho, i have been in touch with the developer who said that he was implementing webfont export. updates are free, but he has not included direct webfont export yet. so its always a bit of a hassle to get the font out of the app into the browser.

but i certainly have streamlined a few factors.

fontlab is not as userfriendly and i cant recommend it mainly for that reason, but also price. glyphs offers a mini version for 40€ that should cover the functionality needed for icon generation.

Answer 5

If you haven't seen it already, my web app could help you generate icon fonts: http://icomoon.io/app

You can import your own SVGs, or browse the icon font library: http://icomoon.io/app/#library

Answer 6

Despite what narkeeso said, a font only has one baseline. All of your icons should sit on that line to be consistent. Some icon fonts try to center the icons vertically but this causes more problems than it solves and you can always adjust the vertical position of the icon relative to surrounding characters using the vertical-align property.

I tested the baseline in the template heavily for that article and it is very successful across browsers. You may wish to match the X-height to a common font like Arial, however. This can be done in the Font Squirrel converter.