Creating Font Icons

More screens are having higher resolution these days, whether on mobile devices, or computer monitors. One solution to making images crisp even on high resolution screens is to increase the image size by two times and shrink them so there are more pixels per inch. Sometimes vector art can be made into SVGs or font icons to guarantee that the image will be crisp no matter what the resolution may be. Font icons are advantageous in that you can easily change the color of your icons, change the size of your icons, and have all icon images in one font file. This tutorial will show a way to make your own font icons in Adobe Illustrator and IcoMoon, but you may also get pre-made font icons from various sites, including IcoMoon.

First you’ll want to create your icon in Adobe Illustrator. You may use the pen tool and shape tools to create icons without a fill color. Font icons are usually one color icons. They may have translucency though. You may add a fill color if you’d like an icon to have more than one color, and IcoMoon will convert the icon into two or more parts, and use CSS to piece them together.

Next you’ll want to convert your strokes into shapes. This is because font icons are created with shapes rather than strokes. If you try to convert strokes into a font icon, it will appear broken. To do that, you need to select all your paths, then click on “Object”→”Expand”, then uncheck “Fill” in the popup, so that only “Stroke” is checked. See screenshots below for guidance.

Then save your icon as SVG. This is important in that IcoMoon and other font icon generating web apps use SVGs to convert into font icons.

Next you’ll want to go to IcoMoon, and click on their “IcoMoon App” button.

Import your SVG files, and select all the icons you want to turn into font icons. Click “Generate Font” at the bottom. Then click “Download Font” at the bottom of that page.

Once you download the font, you should have the following files:

/demo-files

/demo.html

/fonts

/Read Me.txt

/selection.json

/style.css

You’ll want to upload the “fonts” directory and copy the style.css contents and paste it into your stylesheet. Follow “demo.html” for an example of the usage.