Using a web font for your icons could be a lot easier, but is it the right thing to do? There are some good sides on using a web font just like there are some bad sides.
So what are the benefits and drawbacks of using a web font for your icons compared to using several images or image sprites?
Using web fonts
- They scale. No matter how big or small you want the icons a font will scale with your demands
- Very little photoshop work. You won’t have to create and save images and later redo it as you might want the image a little bit larger or smaller
- Not much CSS at all. No need to write all those CSS classes with background images and sprite positions
- Not very user friendly. Screen readers will have a hard time understanding that that lowercase “p” actually means “silhouette figure of a man”. However, if your don’t care about the people using screen readers this might not be a drawback for you.
- SEO. A lowercase “p” to illustrate a silhouette figure of a man might have a negative impact on your SEO. Not a big impact though. But still.
- Limitations. You are limited to the icons in the fonts you’re using. If you want your own custom made icons, or just more icons you’ll have a hard time googling new icon fonts or creating your very own font instead.
- No limits. There are endless of resources of icons available. Especially those now annoying social icons. They are everywhere!
- User friendly. If you do your HTML and CSS correctly screen readers will have no problem sorting out what’s what.
- Creating all those images. If you don’t use sprites you have to keep all those images updated, and even if you use sprites you still need to keep the sprite image file updated.
- They don’t scale. If you have a sprite with 50 icons and want them all 25% larger you’ll have a hassle remaking the whole sprite file from start. I’ve done that. Not funny.
There are many pros and cons with either method. However the most correct and accepted method of solving the issue of icons is still images or image sprites. I’ve myself wrestled with the idea of using a web font for icons in some cases, but I’ve always gone back to sprites since I always wanted something that wasn’t in a font.
- Font Awesome – The iconic font designed for use with Twitter Bootstrap
- Socialico – A package of 74 social media icons, combined within a single weight font
- Entypo – A set of 100+ carefully crafted pictograms available as an OpenType font, vector EPS and web font
- CSS Sprite Generator – A web tool that helps you create a sprite and CSS from all your images