Although perhaps still in their infancy, It is a fairly well–established fact among developers that using an icon font instead of an image sprite for the icons on your site is pretty cool. I’m sure many of you have read about the numerous benefits but I’ll briefly recap incase anyone reading this is still in a Turkey coma.

• Icon fonts allow developers to change the colour, size and shape of icons out with a speed and ease that does not come with flat image files.
• There are obviously a range of different icon fonts that can be used but to economise on HTTP requests you can generate your own font files and include custom icons. There is only ever one HTTP request for any sized set of icons.
• Icon fonts automatically scale for retina displays, so building ‘mobile-first’ sites is made even easier too, and they’ll look good on any display or resolution.

Whether you’re a beginner or a seasoned pro most of the above is now fairly well-known by professional developers. Icon fonts are currently used for icons on menus, buttons, search bars and download links all over the internet, but what else can they do? There are some fairly cool, but perhaps less well-publicised ways of using icon fonts I’ve come across this year that don’t just revolve around menus and buttons, and some might even inspire you to use them in new ways in the new year.

First of all, one of the main problems we’ve faced with icons in the past is that single glyphs have to be monochrome. You can change the colour, but there can only ever be one colour. When I first started using them I didn’t mind this so much because I was so happy to just be using them but it is limiting to some degree. This article on ‘Icon Stacks’ by Conor Muirhead, however, presents us with a solution to this problem, and the clue is in the name. His idea is to combine glyphs and create layers with them, ultimately enabling us to build multicoloured icons. The addition of gradient, too, done all in CSS can mean you’ll forget that ‘background-position: -1384px’ ever existed. His example of icons for different types of weather is great, and given that you can be as subtle or as neon as you fancy I’d like to see them used for hover states too.

My second example is perhaps not strictly using an icon font, but is here nevertheless to demonstrate a different use of icons themselves. Icons are useful not only for the practical reasons listed above but also to give a site or application personality. One of the funniest uses of them I’ve seen recently is on Skype. When changing the default font on the Skype application to Comic Sans the grinning smiley icon (usually used to open the emojis menu) turns into a sad face. This is an unnecessary, subtle but ultimately pretty funny nod to the disdain we now show towards a font so loved by windows 95 users. I like it because it isn’t there to improve user experience, but knowing it’s there is funny and in that way does improve the experience of the user somewhere; Skype has a sense of humour.

Tim Pietrusky (developer and creator of weloveiconfonts.com) also built this strangely endless css animation using one icon font. It doesn’t really tell a story but watching the burger sun rise and set over the apparent race between a bicycle, a helicopter and a shopping trolley is pretty hypnotic, and if he can keep you watching this for longer than twenty seconds I’m guessing there’s a lot more scope out there for icon font ‘stories’. I’ve thought this sort of animation would perhaps be useful for a loading graphic or an animated banner, but i’m not sure which is more inspiring-the fact that he’s built this and it goes on forever even giving you a sense of the passage of time whilst concurrently being mesmerising, or the fact that the sun is a giant burger.

Aside from the above examples I’ve struggled somewhat to find many good uses of dingbat fonts on the web; articles singing their praises and galleries demonstrating the massive selection out there aren’t hard to come by but imaginative uses of the fonts themselves seem to be lacking. A couple of my personal favourites are WC-rhesus (various graffiti type paint splodges I’m thinking of suggesting to my arty friend for decorating her site) Oil Crisis (which consists of various images of cars from the 1970s) and Geobats (countries of the world) but how to put them to good use?

Manipulating the icons is one possibility; stretching or skewing them could be useful, and I’ve thought for a font like Geobats you could potentially add a zoom to illustrate a particular part of a country, continent etc? Ultimately I’m just not sure. I have been convinced however by the idea of using icon fonts for ‘throbbers’ (sounds rude? Merry Christmas.) as they have been in this example – pretty light on code, works using delays and colour changes timed by keyframes, and you can make it as fancy as you like. CSS-only loading graphics are obviously already in existence (for example here, and here) but I’d like to see more done with icon fonts given the range of characters now available to us.

Obviously a lot of these ideas won’t work in IE<10 (I’ve come to assume most things I enjoy in life aren’t supported by IE<10) but I’m thinking a lot of these are ‘nice-to-haves’ for now. Who knows, this collection of ideas may provide some inspiration for you as readers, or maybe just serve as a record for where-we-are-now as so many other collections of Codepen links do. I personally hope that people, including myself, keep experimenting with ways of making websites more personable and fun so we don’t lose our attention to detail in amongst all the giant site builds. Maybe next year I’ll be writing to you all about a stacked loading graphic I made (sorry, couldn’t write ‘stacked throbber’ in this article) that displays an endless CSS animation of 1970s cars taking a transcontinental drive. Or maybe i’ll write to you about how far I’ve got with creating a burger as big as the sun.

Happy 2014 everybody!