Home > Web > Icon fonts

Icon fonts


Icon fonts are a great way to enhance the performance of your website. I decided to put together a list of resources to help you understand, create and integrate icon font into your website.

Why use icon fonts?

First of all, what’s the big fuss about icon fonts? The basic idea is that instead of having tens of small images (and of course, tens of small HTTP requests) you embed all those images as characters into a font. Having only one request of a bigger size it is highly recommended instead of having multiple smaller requests, as the overhead of a HTTP request is huge in bandwidth and time.

You can also use sprites, but this approach has several benefits. First of all, it is easier and your code will be cleaner. When using sprites, the images will have only one resolution and one color. With icon fonts, you can set different colors and sizes for your icons without having to download another set – you actually set the font color and size. Here’s a demo.

There are some downsides, but I would say none of them major. Editing an icon font could be a little bit harder than editing just a simple image. Also multicolor icons are not suitable to be embedded in icon fonts. But the trend now is to have cleaner pages and icons, so multicolor icons could not be on your wishlist anyway.

As with any new feature, the biggest question is browser support. Good news here: all major browsers are on board.

If this convinced you, everything comes down to two things: creation and integration.

Creation of icon fonts

Editing

Basic idea is simple: vectorize your image into SVG images and embed them all into one SVG font. For this you can use InkScape and, as a beginner, a comprehensive tutorial and a video tutorial can be of great help.

Tip: It is recommended to fill in the name for each glyph (glyph-name XML attribute) in the SVG font. This way anyone with a text editor can easily identify the glyphs in the SVG font and change the unicode mapping for example.

Conversion

The end result will be an SVG font, but as you saw browsers support different formats. Now it comes to converting the SVG font into other formats.
For TTF I used to use FontSquirrel, but there are other better choices. http://fontface.codeandmore.com/ was a good and very fast online converter, but unfortunately you have to pay for it, though it’s only $8 per year.

What I currently use is http://onlinefontconverter.com/ to convert from SVG to TTF and WOFF. I don’t know why but usually EOT conversion got stuck so I use http://www.font2web.com/ for this final step. You can also use http://www.freefontconverter.com/ but it doesn’t convert to EOT, so again you will need font2web.

Integration of icon fonts

Font definition

To define a font you should use @font-face in your CSS and that’s pretty much it.
A basic common code sample will look like this:

@font-face {
    font-family: "MyFont";
    src: url('myfont.eot');
    src: url('myfont.eot?#iefix') format('embedded-opentype'), /* IE6 fix */
        url('myfont.woff') format('woff'),
        url('myfont.ttf') format('truetype'),
        url('myfont.svgz#MyFont') format('svg'),
        url('myfont.svg#MyFont') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "MyFont";
    src: url('myfont_bi.eot');
    src: url('myfont_bi.eot?#iefix') format('embedded-opentype'), /* IE6 fix */
        url('myfont_bi.woff') format('woff'),
        url('myfont_bi.ttf') format('truetype'),
        url('myfont_bi.svgz#MyFontBoldItalic') format('svg'),
        url('myfont_bi.svg#MyFontBoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
}

Or if you’re using SCSS and Compass, which I highly recommend, then the above sample will become:

@import "compass/css3";
 
@include font-face('MyFont', font-files('myfont.eot', 'myfont.woff', 'myfont.ttf', 'myfont.svgz', 'myfont.svg'));
@include font-face('MyFont', font-files('myfont_bi.eot', 'myfont_bi.woff', 'myfont_bi.ttf', 'myfont_bi.svgz', 'myfont_bi.svg'), bold, italic);

Icon usage

Now that you declared your font you can use the icons. I will show below a few examples.

<span class='icon star' aria-hidden="true"></span>

<span data-icon='S' aria-hidden="true"></span>

… and the CSS …

.icon:after {
    font-family: "MyFont", sans-serif;	
    font-size: 12px;
    line-height: 12px;
    speak: none;
}
.icon.star:after {
    content: "S";
}
.icon.star-empty:after {
    content: "s";
}

[data-icon]:after {
    font-family: "MyFont", sans-serif;	
    font-size: 12px;
    line-height: 12px;
    content: attr(data-icon);
    speak: none;
}

For the first icon I split the declaration in two, so that you can easily add other icons as well. Of course, IE7 does not have support for :after, but, oh well, if you really need it, I think you can live without icons. Second form it’s more generic and it has the same browser support as the first one.

Notice the aria-hidden attribute and speak CSS property added here for accessibility purposes. The preferred way will be the speak property, but unfortunately there is almost no support for CSS2 Aural Style Sheets or CSS3 Speech.

In the end, a few free icon fonts:

Categories: Web
  1. Anonymous
    April 24, 2013 at 2:38 am

    Sweet! I’m already using font icons, but I haven’t created any myself. Very useful details on that! Thanks, Stef.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: