Creating Custom Icon Fonts
Benefits of Icon Fonts
I’ve always been obsessed with icons and hieroglyphs, so as a web developer, I got all excited with the sudden popularity of icon fonts. Using icon fonts, as a replacement for images, has many benefits. The most important, in my opinion, is performance. Because icon fonts are vector and are contained in a single file, they perform better then, say, using a sprite as an image container. Although, both a sprite and a font file make a single HTTP request, the icon font file is usually a lot smaller.
Another important benefit of using icon fonts is optimization for high-resolution screens. The media query is a wonderful thing, but if it can be avoided for swapping images for high-resolution screens, it’s a quick win – one file for all screens and device types! Because icon fonts are vector, they will scale without loss of quality and again, when you compare file size and the single HTTP request, it’s a no-brainer.
With icon fonts, it’s also super easy to change color and size using CSS. As browser support for CSS3 becomes more advanced, you will be able to do all kinds of other cool stuff, like apply gradients, drop shadows and background textures.
Getting Started
There are a few icon font generators out there, but I’m using Icomoon because you can import your own vectors, import other icon font packs, only include the icons you need, use the Private Use Area feature, etc. The best part about Icomoon is that it’s 100% free and open!
The first thing you’ll want to do is go to http://icomoon.io/app/. When you first enter the app, you will see icons galore! If the icons that are needed are on the screen, you can simply click to highlight the icons you want. You must make sure that the Select tool is selected, but I’m pretty sure it is by default. There are two other tools available. The second tool is the Delete feature. When selected, it removes the icon from the icon library that displays on your screen. The third tool, is the Edit tool. When selected, simply click on an icon to edit. You will see a pop-up window (figure 1) with the icon you selected and a few features including Rotate, Flip, Scale and Move. You can also download that icon as an SVG. This is helpful if you want to take it into Illustrator and make changes to the icon that wouldn’t be able to made inside of Icomoon.
figure 1
Rollin’ Your Own
If Iconmoon doesn’t have the icon you’re looking for, you can create your own vectors in Illustrator, and import them into Icomoon. To do this in Illustrator, you need to make sure that your icon is a single layer and has a single color. Once you have done that, you need to go to File > Save As > SVG(*.SVG). Using the default SVG Setting should be okay. Click OK.
Now that you have saved your vector as .SVG, you have two options to import it into Icomoon. You can use the Import Icons button at the top of the Icomoon app. This will open up a pop-up where you can locate the file in the directory that you saved it in – select the icon and click Open. The other way to import your custom icon is by dragging the .SVG file directly onto the Icomoon app screen. A section at the top of the screen will appear that says Drag your files here (figure 2). You can drag multiple file here as well.
figure 2
Generating Icon Fonts
After following the instructions above, select the Select tool and click on all the icons you want to download as a font. At the bottom of the screen you will see a Font button. Click on it and you will see all the icons that you selected on the previous page appear with multiple options. The first change I always make is under Reset Encoding – change this option to Private Use Area. This will make sure that the unicode is not read out loud by screen readers. This is a good option if you have useless characters mapped to each icon. For example, if you have “H” mapped to a home icon. The screen reader will read out loud “H”, which makes absolutely no sense to the user.
Next, click on Preferences to define your custom font name and class prefix. The next option you’ll see is Font Metrics (figure 3). The default settings usually work just fine for me.
figure 3
This last setting option is important. On each icon, you will see little arrows in the upper right corner. Click on this and select option Symbol. Select an appropriate unicode symbol that best represents what your icon is trying to portray. For example, if you’re icon is a phone, find the unicode symbol that is a phone. This unicode is what will display if the icon font has problems loading or is incompatible with an older browser. The closer you can get to the icon representation, the better. Once you have done this to all your icons, click on the Download button at the bottom of the page. A .zip file will be downloaded with a folder containing all the font types along with a style.css file that contains the CSS and an HTML file with usage examples.
Down To The Code
The CSS file gives you two options for inserting icon fonts into your web page. The first option uses data attributes and looks a little something like this:
[data-icon]:before {
font-family: 'customfonts';
content: attr(data-icon);
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
The HTML for using data attributes goes a little something like this:
<div class="glyph"> <div class="fs1" aria-hidden="true" data-icon="◪"></div> <input type="text" readonly value="◪" /> </div>
The second option uses a class per icon. The CSS looks like this:
.icon-directory {
font-family: 'customfonts';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.icon-directory:before {
content: "\25ea";
}
The HTML for using a class per icon goes a little something like this:
<span class="box1"> <span aria-hidden="true" class="icon-directory"></span> icon-directory </span>
The End Result
This is the end result using the class per icon method.
icon-directory
That’s it! Let me know in the comments below if you have any problems using this tutorial.