Font awesome is a web icon font system that offers the opportunity to use scalable vector icons that can be customized — it is delivered by CSS font styles as with web fonts (Google web fonts for instance) but the practical advantage with font awesome is that I can use the vector icon set inside my graphic prototype interface, for instance when designing mock-ups in Photoshop by using the .otf (font file) and copy and paste the icons directly into my application document. I have tried to embed the font awesome features in Axure but I’m still struggling to make it work as this is a quite quirky thing, as mentioned in an earlier post Axure doesn’t support everything out there.
Displaying icons using a font through CSS attributes has several advantages over the use of traditional images, most notably that the icons are vectorized and thus fully scalable, and all fit in one lightweight font file. I’ve taken the steps to embed the font awesome concept here to show some examples of the icons available. I’m using the actual icon names like they appear in the set. There’s several icon categories like web application icons, text editor icons, directional icons etc. There are 302 web icons in the font awesome 3.1.1 system as we speak, so this is obviously just a small sample:
My personal impressions
I’m quite exited about font awesome and it’s going to be interesting to see if it can develop even further, it carries a lot of potential since it’s already been included in the CSS standard. And since its an open source project it has a vibrant community of people helping each other out in the developments. My best guess right now is that more concepts like this is going to be produced making it difficult to know if font awesome is going to be the only industry standard within the world of web icon fonts. A pitfall is if everyone started to use the same web icons it wouldn’t stimulate any originality or strengthen the visual identity, it’s tempting to use a concept that is less time consuming to maintain after all. No doubt, the practical advantages of using a concept like this is huge.
I hope for a standard that even the IE browser can embrace, although that’s a tall order. Microsoft tends to do things their way and that doesn’t always correspond with standards. Validation issues with IE7 has already been identified but font awesome has launched an IE7 specific fix for that – not the last one I would presume. Font Awesome 3.1.1 is created and maintained by Dave Gandy and I think he’s doing a great job.
Here’s some typical video material I’m watching to get to know the features of font awesome. Published on Youtube by crearegroup on 24 Jan 2013