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?

Related articles

3 Appreciated Comments

  1. On the , Sebi Lasse said:

    perfect piece -
    and btw: there are severeal “mixing” tools around to mix your own icon font,
    e.g. http://fontello.com/ (free)

  2. On the , Lexi said:

    Thanks for listing down cool icon fonts, Font Awesome is the perfect one for my new project :) Thanks for the tip!

  3. On the , Darryl Manco said:

    I never though of using icon fonts the way Drew spotlights. Something new to put into action. Thanks for the inspiration!

Have a comment? Tweet @leemunroe and I'll be glad to respond.