Insight, advice, news and chit chat

Icon fonts are awesome - a note to our designers

[Written by Kevin]
You might not know much about it, so let’s state this clear and loud before I go any further: Icon fonts are awesome!
The web is moving, IE8 and below are sinking. Get over it.

Why it’s important to use them

Moving forward, we use more and more HTML5 and CSS3 in our code, we design and build for the mobile web, Think less pictures, more code. Technically, this means less HTTP requests to send and less files to load, which reduces the page load time drastically.

Designer and developer friendly

From a designer point of view it doesn’t change much, except that your website might not look as wonderful as it should in IE8 and below. But as I like to say, in the end of the day the user decide what browsing experience they want to have, and they are some nice way to make them aware of this.
We are already using CSS3 for rounded corners, shadows, some gradients, web fonts, etc. Now I’d like you to take a look at the following link and think about it: . No doubt you’ll see how awesome it is.
This is a large and widely supported font icons library, and you can even submit your own icons if the one you want isn’t there! Some very important advantages are:

  • You can resize them as you wish – use the ‘font-size’ property.
  • You can change their colour easily. ‘font-color’ it is – nice guess!
  • You can still have them wrapped in a shape of any colour.
  • Page loads quicker, because you send less HTTP requests and load one CSS file instead of x amount of pictures.

Still not convinced?

If you love the idea as much as I do, please feel free to use these icons in your designs – see all the nice uses you can make of them on the website above.
Should you have any questions in this regard, please give me a shout!

Leave a comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>