Benefits of using Icon fonts
Icon fonts are the new way to include vector based icons on a website. They’re not like normal fonts; they use symbols, compared to normal fonts which include letters and numbers. Icon fonts are implemented using the font-face method. This allows us to edit colour,size and other CSS properties, instead of constantly editing in Photoshop. Generally they make our lives easier, which can’t be a bad thing.
- Font icons can be adjusted on site instead of using an image editor i.e colour, size etc
- Any CSS properties that you use on an image can be applied to an icon font i.e rotate, scale, transitions etc
- They don’t require extra HTTP requests for every character, compared to images which usually need one HTTP request per image (unless you’re using a Sprite)
- Relatively small file size
- Look great on high-res screens as they are vector based, compared to Bitmap images
Whilst you can create your own icon font, some of us don’t have the time and skill set. Luckily there are plenty of Icon font libraries we can use.