Icon Fonts
Overview
Why Use Icon Fonts?
Icon fonts are a great way to enhance the performance of your website. The main reason is that because instead of having large number of small images, and of course a large number of HTTP requests, you embed all those images as characters into a fsingle font file. Having only one request of a bigger size it is highly recommended instead of having multiple smaller requests, as the overhead of a HTTP request is huge in bandwidth and time. Additionally, With icon fonts, you can set different colors and sizes for your icons without having to download another set, you actually set the font color and size. For example, checkout the Icon Font Demo from CSS Tricks.
There are some downsides to icon fonts, but overall none of them are major obstacles. Editing an icon font could be a little bit harder than editing just a simple image. Additionally, multi-color icons are not suitable to be embedded in icon fonts. However, the current trend now is to have cleaner pages and icons, so multi-color icons should not be on your wishlist anyway.
Below is a summary of the Advantages and Disadvantages with using icon fonts.
Advantages to Using Icon Fonts
- Vector-based vs. Bitmap which allows for scaling up or down without loss of fidelity
- Perfect for high-density and high-resoultion monitors
- Ability to change colors of an icon without additional intances
- Sizing and color variations can be done in CSS
- Better performance due to few images and HTTP requests
- Browser support includes IE8 and above
Disadvatages to Using Icon Fonts
- Do not work for complex images
- Are monochrome based, so you can only have one color per icon
- Additional steps required when creating icon fonts
When to Use Icon Fonts
- Your graphic is very simple
- You only need one color
- You need to modify some of the attributes via CSS
When to Use SVG Images
- You need full color capabilities
- You don’t need IE8 support (there are some workarounds to this)
- Your image is simple – especially if you are setting it as the background image
When to Use PNG or JPG Images
- You are working with photos
- Your graphics files are smaller as a jpg than a png