If you have ever wondered how you can create your own custom font icons, it has never been easier. In this tutorial you will learn how to create and deploy font based icons on your web page and control them using CSS. We will be using a vector based image editor to create the actual icon, in this case we shall be using Adobe Illustrator but any software that is capable of saving to SVG format will work just fine. We will be using Icomoon.io to convert the icon and generate the font files and CSS.
Creating the Font Icons
Open up your favourite vector editor and get started creating the icon you want. You can also import existing vectors to edit or use as is. In my icon design, I have decided to go for a soft drink cup with a muffin in front. Here are a few tips when creating your vector icons that will make sure this process works correctly:
- Strokes get ignored when generating fonts or CSH files. You can convert/expand strokes to fills.
- Text elements get ignored. You could convert them to fills.
- Unite/combine your fills and avoid overlapping paths.
- Instead of using white fills for making holes, subtract the shape in the front from the shape in the back. In Adobe Illustrator, this can be done using the Pathfinder window. In general, avoid overlapping shapes with the same color.
- Adding a bitmap image (PNG, JPEG, etc.) to an SVG image does not make it vector. Bitmap images embedded in SVGs get ignored.
Once you have created your icon, save or export your file in SVG format.
Converting Your Vector Icons to Font Icons
Now that we have our SVG vector icons, we are ready to convert them to font icons. To do this, go to www.icomoon.io/app.
Once you have the icomoon app loaded, click on Import Icons and select the SVG icons you created in your vector editing software. When your icons appear, select them to highlight them yellow. Once highlighted, click on Generate Font at the bottom of the page.
You should now find yourself on a page showing you the font icons that have been generated. If you want to, you can also edit your font icons here as well as rename them. By default they will be named after the filename name you used for that icons file. It’s a good idea to make sure your icons are all named well here as you will be referencing them using CSS. Also keep in mind that the default CSS that will be generated here uses a prefix of
Click Download, located at the bottom of the page to download the generated files. Once downloaded, unzip your files.
Adding Your Font Icons to your web design
Now that you’ve downloaded the icomoon font files and unzipped them, we can get started adding them to your web design. The only files and folders needed within the download folder are style.css and the fonts folder. Keep in mind that by default the fonts folder must be in the same directory as the style.css file. If you need to move the fonts folder to a different directory, you can edit the paths within style.css.
Within your HTML page,link to the style.css file by using
<link rel="stylesheet" type="text/css" href="theme.css">. Now create an element to use the icon class with, some people use
<span> tags but I like to use
<i> tags as follows:
<i class="icon-snacks"></i>. You can actually use any element you wish to add your icons too but in most cases using an inline element will work best.
All done, you should now see your icon appear within your web page.