Some awesome Icon Fonts to replace Image Icons

An icon font is simply a font where the characters are icons instead of letters. This provides you with the benefit of resizability, and they are pretty stylish too. Icon fonts have become pretty prevalent in usage amongst web designers because:

1. They are user friendly: certain symbols and shapes can go a long way to showing a user how to use web pages.
2. They are easy to use: once you include the appropriate files in your HTML icon fonts are really easy to use. Normally you have to upload various versions of icon images, but with icon fonts it’s just as easy as typing
3. They are clean: you don’t need icon sets anymore, with CSS and an icon font you can accomplish almost anything!
4. They are smaller: pages will load faster since you’ll be using less images, especially if your website needs to be compatible with a bunch of different devices.

Example

With a regular image icon you might have a little trouble getting it to look right in smaller or bigger sizes. Using icon fonts this problem completely disappears. Ever wish that your icons were a slightly different color? Just use the CSS color property to change the color of your icons. You can even add shadows or use any other text alterations that CSS provides.

Best Icon Fonts

There are a lot of icon font sets out there now, so below I have compiled some of the best. Some of them are free, others are not, but they are usually pretty cheap anyway.

• Fontello (free)
• Symbolset ($30)
• Font Awesome (free)
• Tipogram ($18)
• Icomoon (free or Purchased)
• Iconic (free)
• Iconsweets 2 ($8)