By , September 2012

Why icon fonts are awesome

I've been using icon fonts for a few projects lately instead of graphical icons.

There are several advantages to using icon fonts.

  1. Scale them with CSS
  2. Color them with CSS
  3. Add shadows with CSS
  4. Change opacity with CSS
  5. Rotate with CSS
  6. Basically make any changes without opening Photoshop and editing a sprite
  7. They automatically scale for retina displays

See for yourself. Chris Coyier put together a fantastic tool help you see how awesome icon fonts are.

List of icon fonts

Icon fonts are getting more and more popular. A few of my favourites:

Pictos

How to apply icon fonts

Drew Wilson put together a useful article on how to use icon fonts.

In summary:

HTML
<a href="" class="icon" data-icon="G">My Link</a>
CSS
@font-face { 
    font-family: Signify; 
    src: url('signifylite-webfont.ttf'); 
} 

.icon:before {
    font-family: 'Signify';
    content: attr(data-icon);
    -webkit-font-smoothing: antialiased;
    vertical-align: text-bottom;
    margin-right:5px;
}

Are you using icon fonts yet?

« How to design a parallax recruiting page Designing better web type with Typecast »

Receive more design content like this to your inbox

Don't worry, I won't spam you and I promise no more than one email per week (more likely one per month).