Use a font instead of images
Jun 18, 2013
by
0
When building a website that uses icons you have a couple icons. You can save the icons as an image ( either one image per icon or a css sprite with all icons ) or you can create a font that has the vector for that image.
The image has the benefit of being able to use multiple colors within the icon. However if you use the PNG format for your image then the icon will not scale or shrink gracefully. You could use an SVG format, however even with the modern advancements not everyone is using a SVG compatible browser. This is where putting your icons in a font definition comes in. You could create or use a font ( such as the font awesome library ) to display icons from a font set. This has the added benefit that these are vector and will scale to any size gracefully.
You can also go in and modify the color of all your icons quickly, since the color is not defined within the file ( unlike an image format ). The major drawback to using icons within a font is that you can't have the color variety. For example, if you have a globe icon and you want the land to be brown and the water to be blue. You won't get two colors within a font definition. Fonts can only use one color for it's display. So while you gain a lot, you lose that ability to use multiple colors for your icon.
Single color icons can still look great and provide an aesthetic enhancement to your website. In which case using an icon font makes it easier and flexible for size and color changes later.
Leave a comment
To leave a comment, please log in / sign up
RSS Feed
Facebook
Twitter
LinkedIn
YouTube