How To Create WebFont Icons From Scratch

There’s been a lot of discussion in design communities as of late into WebFont Icons. There’s no doubt, that image/raster based icons in web design are fast becoming a relic of the past.
Since the early days of CSS, image based icons in web design have been an industry standard. But that has all changed as screens with higher PPI’s and PAR’s have become increasingly affordable. Having said that, the vast majority of displays used to browse the web at the moment, are still using around 72 – 150 PPI, well below minimum requirements for ‘retina’ support.

However, with constant advances in manufacturing and technology, it will only be a matter of time until higher PPI based displays become standard. Nevertheless, image based icons still raise eye-brows for concern even today.
There are a number of solutions to this issue available today, like @2x images scaled down using CSS3, image sprites, or even JavaScript replacement frameworks. However all of these solutions have a common problem: More HTTP requests and extra kBs. Not to mention they are limited to both color and scaling limitations.
The answer is simple: WebFont Icons, and today I will be showing you how to create them from scratch.

---

1. Prep Your Icons

For the purposes of this tutorial we will simply be using Adobe Illustrator. Dedicated font programs like Glyphs, Font Lab Studio, or FontForge are far too advanced for the comparatively simple task of creating an icon font. Considerations like tracking, kerning and other font-related details are for the most part irrelevant.
Open up Illustrator and start designing your icons. It’s best to work with some sort of grid system to ensure your designs are all the same size and proportions. For now, you can design them in any color or shade you see fit, however ultimately they will have to be rendered in straight black when we create the font. Don’t worry though, you can change color easily using CSS.

---

2. Setting Up Your ‘Glyphs’

So now that we have our design set up, it’s time to prepare them into individual .SVG files. Open up a new illustrator file at 512px x 512px and copy/paste all your icons into separate layers.
Set up a grid with a 12px border and a center point. Select all your icons and scale them collectively so they are within your borders. You can then compare them and make any minor adjustments individually if needed.
There are several things you need to look out for here. Make sure your icons are centered within your artboard. For example, my Apple icon and my potion icon are slightly different sizes. This is fine, however I have arranged them so they are centered within my borders. The easiest way to do this is either through a a guide system, or using Illustrator’s built in aligning buttons. Lastly ensure all your icons are black.
 

---

3. Exporting To .SVG

Once your icons are all ready to go, export them into individual .SVG files by going to File -> Save As and choose .SVG. Name them accordingly. There’s no need to play around with the save settings, the defaults will do just fine.

---

4. Importing to IcoMoon

We are going to use a free online IconFont generator called IcoMoon. There are a number of other solutions you could use such as Fontello, however I find IcoMoon the easiest to use.
Open up the IcoMoon Web App and click on the “Import Icons” button at the top. You can select multiple files at once, so go ahead and select all your individual .SVG files we created earlier.
There is also an edit option if you want to adjust the scale, position or rotate it, just in-case you missed anything in Illustrator.
Once your files are uploaded, select your icons, they should highlight to yellow, which means they will be included in your final font file. IcoMoon includes a number free third-party icon sets to use as well, however I am just going to use the six icons I created earlier.

---

5. Exporting From IcoMoon

Click the “Font” button at the bottom to begin exporting your icons into a usable font file. You will then be presented with an overview of your icons including their names. IcoMoon will use your chosen font name as a prefix, along with the name of the individual icons to create default CSS classes, so name both wisely.
Once you’re satisfied with everything, go ahead and click the “Download” button at the bottom. You will now have a package which includes your icon set in a number of different formats .SVG, .EOT, .TTF and .WOFF.
The only files you should need is the “fonts” folder and the “style.css” file. If you’re working on an existing project simply copy/paste the relevant CSS into your existing style-sheet along with the fonts folder. Don’t forget to update the paths to the font files in your CSS.

---

6. Using Your IconFonts

Using the your icons is pretty simple. If you open the “style.css” file, you’ll first notice an “@font-face” import at the top, along with the prefix (whatever name you gave your font) data-attribute – linking the font to the prefix class. Finally pseudo elements are used to apply each icon-code its content.
You call your icons in HTML as follows:

HTML

<span class="PrefixName-IconClass"></span>

Pretty simple right?
You can also change a number of other settings like hover effects and transitions. Here I have added a simple hover effect that changes the color while also making the icon larger.

CSS

[class^="PrefixName-"], [class*=" PrefixName-"] {
font-family: 'fonticons';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;

/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

PrefixName-IconClass:before {
content: "\e601";
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
PrefixName-IconClass:hover:before {
font-size:60px;
color: rgb(35, 194, 131);
}

---

Advanced Usage

There’s also a number of different effects you can use, especially for hover states: Like rotation, size, color, transparency, shadows, gradients and much more. Try experimenting with a few.

---

Are you already using IconFonts for your projects? What method do you use to implement your icons? Let us know your thoughts in the comments.