Icon fonts are a font that gets installed onto your website that allows you to use numerous vectored icons. This means these icons are very similar to any font that you would have installed on your computer, such as Arial or Helvetica.
Since these icons are vector objects, you have the ability to manipulate them via CSS, just like you would with any normal font.
Benefits to Using Icon Fonts
- Change colors with CSS
- Change the size with CSS
- Rotate them with CSS
- Works with retina display natively since they’re vector images
- Add drop shadows with CSS
You can see live working examples of these benefits over on Chris Coyier’s blog.
My favorite icon font to use is Font Awesome; however, there are several others gaining popularity. Font Awesome works by using an <i> element with an icon-specific class such as:As you can see from the above example, adding Icon Fonts to your code will not bloat it at all and will greatly increase your sites page load efficiency.
Are you using Icon Fonts yet? Share with me in the comments which is your favorite.