Do your web buttons or icons pixelate when displayed on retina devices? Do you crave a solution that isn’t hacky (like attempting to detect the type of display being used)? Enter Font Awesome.
When I first heard of this open source, free font library, I thought “hold on to your bits and bytes, this may be too good to be true.” To my surprise, it wasn’t. It just works. Not only does it work, but it took hardly any time to integrate the library into a large and complex web based application. This is all I did (taken from the Integration section of the Font Awesome page http://fortawesome.github.io/Font-Awesome/):
- Copy the Font Awesome font directory into your project.
- Copy font-awesome.less or font-awesome.min.css into your project.
- Open your project’s font-awesome.less or font-awesome.min.css and edit the font location to point it to your font directory.
The inner workings of the library are brilliant and simple – it uses vector graphics to display icons. Vector graphics are so powerful because they use points, lines and shapes based on mathematical expressions to represent images. The bottom line is, that as the rendered canvas changes size, the image does not get distorted since it can re-render based on the new size in a lossless manner.
Font awesome is a simple way to transform a web page from good to awesome in no time. You can get started by visiting http://fortawesome.github.io/Font-Awesome/. They provide many excellent examples on how to use their library.
