Icon Fonts

Jan 27, 2014

A couple of years ago a friend pointed out pictos, a website offering font icons. The idea of using vector based graphics for icons rather than pixel images was appealing but using icon fonts requires that the browser supports the CSS @font-face rule and browser support was spotty at the time.

Now all modern browsers support @font-face and it is time to say goodbye to image based icons and embrace icon fonts.

There are numerous blog posts and articles on the web about this subject so I won't repeat all of that here.

Pictos, the pioneer of icon fonts, has a comprehensive “must-read” introduction to icon fonts on their website Using Icon Fonts. This article covers all aspect of using icon fonts.

There is a great post at CSS-TRICKS that lists numerous sites that offer icon fonts.

While there is a vast amount of fonts available online, often we need that special custom icon. For those we can create our own fonts with several online font generators. All we have to do is create a svg graphic with Adobe Illustrator or Incscape, etc. and upload the file to the online font generator. Most generators will create a set of icon fonts and even provide the CSS.

mashable.com just posted an article with a list of online font generators. You should check out fontastic which at the time of this writing features a very funny video on their home page which illustrates the advantages of icon fonts.

I got my initial education about this by reading two excellent posts at webdesignerdepot.com: How to turn your icons into a web font  and How to make your own icon webfont. Both articles are excellent and I recomment reading them.

On a recent project I used the icomoon.io font generator. Creating your icon set is very simple and icomoon creates fontsets that use the private use area of unicode so a screen reader will not read the code aloud.

For those of you who just want to see some code, here it is:

Before icon fonts we'd use an image:

<img src=“path/to/images/icon-menu.png” alt=“main menu” />

Now, using an icon font the image will be replaced with this:

When adding an icon to a link, we'll use:

<i class="icon-menu" aria-hidden="true"></i>

The link text is surrounded by a span so I can hide the text if needed. 

The CSS to show the icon is provided by icomoon:

@font-face { 
  font-family: 'icomoon'; 
  src:url('iconfonts/icomoon.eot?ib2lka'); 
  src:url('iconfonts/icomoon.eot?#iefixib2lka') format('embedded-opentype'), 
    url('iconfonts/icomoon.ttf?ib2lka') format('truetype'), 
    url('iconfonts/icomoon.woff?ib2lka') format('woff'), 
    url('iconfonts/icomoon.svg?ib2lka#icomoon') format('svg'); 
  font-weight: normal; 
  font-style: normal; 
} 
[class*="icon-"] { 
  font-family: 'icomoon'; 
  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; 
} 
.icon-menu:before { 
  content: "\e61b"; 
} 

We can now style this icon just like any other font using color, opacity and text shadow.

What about multi-color icons?

We can create multi-color icons if we design our font set properly. The idea is to break a multi-color icon into its mono-color parts and to create a single icon fragment for each color. The icon fragments can then be stacked thereby producing the multi-color icon. The stacking can be done by either using the pseudo selectors :before and :after or multiple spans in the icon container.

Let's consider this example of a four-color icon:

The html could look like this:

<i class="icon-windows size1"><span class="color3"><span class="color4"></span></span></i>
<i class="icon-windows size2"><span class="color3"><span class="color4"></span></span></i>
<i class="icon-windows size3"><span class="color3"><span class="color4"></span></span></i>

With the css like this:

.icon-windows {
  display: inline-block;
  width: 1em;
  height: 1em;
  position: relative;
  margin-right: 50px;
}
.icon-windows.size1 {
  font-size: 10em;
}
.icon-windows.size2 {
  font-size: 5em;
}
.icon-windows.size3 {
  font-size: 1em;
}
.icon-windows:before,
.icon-windows:after,
.icon-windows span,
.icon-windows span:before {
  position: absolute;
  top: 0;
  left: 0;
  text-shadow: 2px 2px 5px #000;
}
.icon-windows:before {
  content: "\e600";
  color: yellow;
}
.icon-windows:after {
  content: "\e601";
  color: blue;
}
.color3:before {
  content: "\e602";
  color: green;
}
.color4:before {
  content: "\e603";
  color: red;
}

Comments

Werner this is an excellent article. You've intrigued me, and I'll follow the links you've provided and give myself an education. BTW, I love blog posts that provide logical and thorough linking to relevant content. Yours does. Nice job!

Add new comment