Icon Fonts – When and Why
As the web is swinging more and more towards responsive design, we as developers (more importantly front-end) need to consider key issues when planning our attack on site layout architecture and mark-up. More importantly, responsive design is targeting mobile devices like smartphones and tablets, and therefore we have to be far more conscious of loading time and server requests.
One of the prime candidates that reflect poor speed is images. As great as images may be, they present various challenges that are sometimes looked over which include file weight, additional HTTP requests and overall don’t scale well at all. Simply put, sometimes the best solution for using images in a responsive design is not to use an image, period.
Enter the icon font.
So what are icon fonts? They are vector fonts where the characters are replaced with icons; basically they’re shapes. Being vector, they scale without losing quality unlike raster images. This means using some crafty CSS, you can change colour, shadows, transparent knockouts, have reliable browser support and best of all, save on file size and HTTP requests.
Below is an example of some media font icons that most sites would generally use:
Want to get started? Here are some of my favourite font icon providers:
