How to turn your icons into a web font
Creating an icon font
Creating an icon font
http://www.webdesignerdepot.com/2013/04/how-to-turn-your-icons-into-a-web-font/
Symbol fonts can be built using a dedicated font-creation app such as , but a professional typography tool is way beyond the needs or requirements of building a simple icon font, in which the relationship between characters (i.e. kerning and ligatures) is not important.
By far the easiest way is to use a great free online app called , by Keyamoon, which takes away all of the hassle of converting symbols into a web font.
This HTML5 app takes away all of the pain of creating font files for simple uses such as building icon fonts. IcoMoon comes with a number of icon sets already loaded, and you can add more to your library, most of which can be used for free (check the licensing). If you are looking for fairly standard icons, such as “file download” and “shopping cart,” then you may find that using one of these is preferable to creating your own.
Step by step
1. Prepare your illustrations
To begin with, you need to create the icons in a vector-drawing program that is capable of exporting to SVG format, such as Illustrator or Inkscape.
While you are designing, you can work with whatever colors you like, but the icons must be one solid color. Make sure each icon is approximately the same size. Having one icon much taller or longer than another will make it hard to build a consistent font. Here, I’ve had to reduce the width of my airship icon so that it matches the others.
