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:

• Signify Lite
• Font Awesome
• Foundation
• Symbolset
• Pictos and Pictos Server

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?