An Introduction to Icon Fonts

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

  1. Change colors with CSS
  2. Change the size with CSS
  3. Rotate them with CSS
  4. Works with retina display natively since they’re vector images
  5. Add drop shadows with CSS

You can see live working examples of these benefits over on Chris Coyier’s blog.

Font Awesome LogoMy 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:Font AwesomeAs 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.

Josh serves as a development team lead at TKG, so it’s his job to ensure web development projects get done on schedule, on budget, and working flawlessly. No pressure! On the blog, he talks general web dev – from HTML5 to responsive design.

Email Josh | Read Full Bio

Leave a Reply

Your email address will not be published. Required fields are marked *

six − two =