Symbol fonts (or Icon fonts) are very trendy in the web design space, because they have a lot of advantages:
- It’s light and easy to embed
- It perfectly scales (vector graphics) and can be used on all screen resolutions and screen densities
- It works on all web browsers, even IE6
More and more websites are using Symbol fonts, but this trick also has some limitations:
- You need to take care of the accessibility of your page, and of SEO. The ligatures trick exposed in the video can easily solve it.
- You can only have symbols with one color.
You’ll find a lot of great articles to explain the benefits of symbol fonts, but I’d like to explain in this video how to create a symbol font in Illustrator CC.
Create symbols with Illustrator CC
In Illustrator CC, you can create black and white shapes and save them as SVG. Why in black and white? Don’t forget that you’re designing a font type. The web designer will be able to change the color of your symbol using the CSS style “color”.
To create SVG files with Illustrator CC:
- Select your symbol
- Select the artwork tool. At the top, set the dimensions of your artwork to the dimensions of your symbol with “Fit to selected art”
- File > Save as… SVG
You can also easily create symbols from bitmap images. The improved “Live trace” engine of Illustrator CC analyzes a bitmap image to create a vector graphic:
- Import a bitmap image (a JPEG, a PNG file) and place it on your Illustrator artboard.
- Select your image and at the top of the Illustrator UI, click on the arrow next to the “Image Trace” button.
- Select the template “Black and White” Logo
- Open the Image trace panel to adjust the Threshold and set the correct contrast for your symbol
- Once happy with your design, click on the “Expand” button.
- By default, Illustrator CC will add a white rectange/background that isn’t required for a symbol font.
- Double-click on your new vector graphic to edit the content. Select the background and delete it.
- Now you can save your symbol as SVG.
Use the web app icomoon
The web application www.icomoon.io is the best way to create custom symbol fonts. You can import your own SVG files and map them to characters, or ligatures (don’t forget to enable in the ligatures in the parameters of your fonts). Generate a font and download it. You’ll get a ZIP file that contains a demo html file, a style.css file and a font folder.
In your web page, add a link to the style.css file, and use the custom CSS classes declared in the style.css file to use your symbol fonts:
<link rel="stylesheet" href="style.css" />
<!--[if lte IE 7]><script src="lte-ie7.js"></script><![endif]-->
<div><span style="font-size:100px" class="icon-myNapoleon"></span>Welcome</div>
If you have feedback on icon fonts, feel free to add a comment to this article or tweet me.