Creating icon fonts with vector software (i.e. inkscape) and fontforge?

Question

Through getting some answers here and some research, I've come across a new approach to implementing icons. Rather than as images or css background, it seems you can approach icons as a font.

Will this method ultimately mean creating a one file font set that has each icon assigned to a character? Because this method is so new to me I really want to sure I approach it correctly first (I see great potential... so much better than creating different icons, exporting each as it's own .png file for every different color and size).

If that's the case, it'll take a bit of memorization (especially since I have over 26 icons). For those more experienced with fontforge, is there a way to say a specific word = character?

Also, in regards to implementing this on the website. I would then need to specify the font type within the css class/id (i.e. font=icons; ). And then I could change the size, color, etc. with css as well? Man, if this really is true. I wish I found out earlier... hours and hours could have been saved.

Anyway, any help with this is greatly appreciated. I'm about to get fontforge and start learning (if there's better free software for font creation, let me know). Hopefully this works out.

Convulsion

I haven't used FontForge, but you must create an Open Type font with ligatures to accomplish this. The technique you are looking to implement is the same as this symbolset.com – Handspike

Answer 1

I've successfully created a few icon fonts for my websites and the Inkscape FontForge approach as outlined in this how-to is pretty solid, and if you're used to using software such as Inkscape, it's also pretty easy too. Here's the steps I take:

Preparation (using Inkscape in this example)

1. Open the Inkscape document that holds your designs.
2. Make sure you've converted all shapes, type and lines to paths and check your drawing in outline mode to be sure. If there are problems, you can always refer back to this base file to make initial changes to the shapes.
3. Create a new document by selecting New > fontforge_glyph.
4. Paste an icon from your design into the new document.
5. Resize the icon to fit the space provided (although it may be best you resize all icons in the original design document first - up to you).
6. Centre the icon on the page using the Align tool (if appropriate).
7. Save the drawing as a plain SVG (it's easier if you title according to the letter to be assigned eg. "j.svg").
8. Repeat for other icons.

I'll often leave this plain SVG document open, pasting in new icons and centering and sizing according to the last. This way there is size and position consistency across the icon set (and you don't have to keep choosing the directory to save your plain SVGs).

---

Glyph creation (using FontForge)

9. Once you've made an SVG file for each icon, open FontForge and create a new FontForge document.
10. In the main glyph display list window, double-click one of the letters/numbers you have an icon for.
11. In this new glyph window, choose File > Import and select one of your SVG files (you'll probably need to change the file filter in the file dialogue to show SVG files).
12. If the import registers errors and the wireframe looks like its suffered a mild explosion, you'll need to go back to Inkscape to sort out the path. There's an easy way to find out the problem that should work in most cases:

* In Inkscape, remove the fill of the icon.
* Add a thin stroke (1px will do).
* Convert the stroke to a path.
* The resulting shape will probably be missing a part of your icon.
* Undo all, then break icon apart and redraw/trace/correct the problem area.

---

Font creation (using FontForge)

13. Back in FontForge, once you've added all of your icons, you need to give your typeface a name. In the main window, select Element > Font info.
14. Change the following:

* **Fontname**: MyFontMedium
* **Family name**: My Font
* **Name for humans**: My Font Medium
* **Weight**: Book (Win XP thinks medium = bold, so best to use Book)

15. In the main window, choose File > Generate Fonts and save to TrueType (ignoring any errors).

---

Font validation/conversion

16. Go to www.fontsquirrel.com/tools/webfont-generator or a similar service to upload your TTF file and get it converted (and corrected)
17. The zip file you download will contain precise instructions on how to implement the fonts into your web project.

Hope that's of help.

Lett

After researching this answer a little further, I found this article (webdesignerdepot.com/2012/01/how-to-make-your-own-icon-webfont) which suggests you only need to use Inkscape and its SVG Font Editor panel (Text > SVG Font Editor) to build your webfont. I've not tried this method but would be interested to see if it works as well as the Inkscape/FontForge approach. – Lett

I've used Inkscape's SVG Font Editor before but as far as I can tell it only lets you add glyphs, not edit them (i.e. I couldn't find a way to load the shape of a glyph into Inkscape's canvas to manipulate it). It also seems to be very limited in other ways, e.g. glyph metrics. The Inkscape+FontForge approach seems to be the easiest solution. – Manmade

Any chance to preserve color? For example, how would I go about making an emoji font? – Predicant

@Predicant Unfortunately there's sparse support for multicolour fonts. I recommend using svg and css :before calls to position and embed colour icons. If you need to minimise http requests for each icon, embed them in the css file: background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>'); – Lett

Is there any restriction on the complexity of the svg graph ? I want to add a line of text below a icon and make them a new icon, is this ok ? – Bladder

@Bladder As far as I know, there aren't any restrictions, although the inclusion of complex shapes such as lettering might significantly increase the filesize. I'd recommend styling the icon class instead. – Lett

May God bless you and yours and thousand times over you sweet, generous man!!! I only wish I had found your post earlier; your 30 minute victory march would have saved me days of my life!! – Verbena

Link to "this-how-to" at the top of the answer is now broken (404). – Comte

Fantastic answer, but some links are broken. 1up 🍄 anyways. – Pismire

Answer 2

Here's an open source example of what you're looking to do:

http://fortawesome.github.com/Font-Awesome/

If you look at their code, you can see how to run the CSS:

https://github.com/FortAwesome/Font-Awesome/blob/master/css/font-awesome.css

And if you want to edit the fonts, download FontAwesome.ttf and edit in FontForge. If you want to do your own TTF, you could, but just take a look and copy how they did it I guess.

(Disclaimer: I haven't done this part of the process. On our team one of the guys uses a proprietary Mac App to come up with the font. If I need to do my own icon fonts in future I'll probably use Inkscape and FontForge though. I've checked enough to see that FontForge can import SVG, I haven't tried it though).

When you're done and you have your TTF font as you want it, you need to convert the font into the many different formats needed to use as a web font. I use this free online tool:

http://fontface.codeandmore.com/

... which will give you your EOT, SVG, TTF and WOFF font files, which should cover you for almost all browsers. You then need to include these files in your CSS, as demonstrated in the file linked above. Note: for the SVG file, there is an ID that you will have to update. I think it is automatically chosen by the conversion tool, so you'll have to edit the SVG, check what the ID is and include it.

For example, in this code:

@font-face {
  font-family: 'MyIcons';
  src: url('myiconfont-iconglyphs.eot');
  src: url('myiconfont-iconglyphs.eot#iefix') format('embedded-opentype'),
       url('myiconfont-iconglyphs.woff') format('woff'),
       url('myiconfont-iconglyphs.ttf')  format('truetype'),
       url('myiconfont-iconglyphs.svg#myiconfont-regular') format('svg');
  font-weight: normal;
  font-style: normal;
}

You may have to change the #myiconfont-regular bit after the svg definition.

Deuteronomy