Tools to create an Icon Font [closed]

Question

I'd like to create an icon font for use in a web application. fontAwesome, Iconic, fontomas are examples of what I'd like to do but I need to use custom icons. I'm not sure where to start. Any help is appreciated.

Pah

Answer 1

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.

Delwyn

Fontforge worked very well. Was able to install it fairly easily using brew. Thanks. – Pah

Homebrew is cheating, this will go on your permanent record! :p – Delwyn

Answer 2

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

Ostend

This app is really useful and well executed. Easy to import SVGs and export a font, complete with the CSS auto-generated. – Luannaluanne

Why I can't generate a 128x128 svg/png through the app? – Lighthearted

Okay, got it. There's a Size field in upper left corner. Thanks! – Lighthearted

Agree. The size option was not very obvious the first time around. – Hefner

Answer 3

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.

Uremia

Answer 4

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...

Cultigen

Answer 5

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.

Foetus

Answer 6

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

Telephonist