My brother James
and I have been chatting a lot over the past week about how amazing
Icon Web Fonts are, so I’ve put together a little video blog to show the
key benefits. If you’re unfamiliar with Icon Fonts, they’re not too
dissimilar from Wingdings. They’re useful, lightweight, modern typefaces
that are perfect for displaying icons on your website without the
baggage that often comes with using images.
Now we’ll talk about these specific Icon Fonts in a moment, but typefaces like Font Awesome, which is free, or Fico carry huge benefits to designers – which is probably why they’ve been so popular with web designers in 2012.
You can think of Icon Fonts as any normal font or web-font. As a
designer you can easily adjust the size, colour and even add shadows
with CSS. Icon Fonts work in almost all browsers including IE6, which
means you get transparency without messing around with any ugly hacks.
Most importantly, a lightweight or hand-picked Web Icon Font will load
quicker in the browser that it’s image counterpart which will help with
your page-speed optimization.
Web Icon Fonts have been huge in 2012
James and I think there’s 3 simple, key reasons why Icon Web Fonts are so popular in 2012:
- The icons are simply pretty cool and modern
- Responsive web design
- Retina displays.
So with Responsive web-design, there’s a good chance that you might
want to increase or decrease an icon’s size, particularly if you’re
using it within a button. Just like text, you can use media queries to
simply change the type size without needing to reference a different
image file. And unlike raster, pixel based images – Icon Fonts are
vector so they look crisp at any resolution.
If you haven’t already, we’d recommending heading over to some of the
many Icon Fonts available online. Like we mentioned earlier, Font Awesome
is a great starting point as their current free set includes over 200
icons and can be installed and used on your website within minutes.
There’s also plenty of premium paid Icon Fonts and also great tools like Fontello
where you can create your very own hand-picked, lightweight hybrid Icon
Font by combining the best of the free Icon Fonts available.
So, wrapping up – we’re pretty confident that Icon Fonts are going to
continue in popularity in 2013. It wouldn’t surprise us if the Google
Web Font archive dons a set or two in the near future.
Example results when using Font Awesome, as shown on their web page.
Web Icon Fonts & SEO
Also, don’t worry about the potential SEO headache of having random
single letters hanging around your HTML markup. Icon Font Packs, like
Font Awesome for example, have been set-up so that you can render with
empty italic tags.
If you refer to the embedded image opposite, and the HTML markup
below, you can see how the empty italics tags are used with a class to
render icons in a similar fashion to how we might use span tags.
1 2 3 4 5 6 7 8 | </ pre >
< ul class = "nav nav-list" >
< li class = "active" >< a href = "#" > Home</ a ></ li >
< li >< a href = "#" > Library</ a ></ li >
< li >< a href = "#" > Applications</ a ></ li >
< li >< a href = "#" > Settings</ a ></ li >
</ ul >
< pre >
|
Thanks for watching this week, check out our supporting post for more
resources and live examples of Icon Fonts in action from around the
web.