When we use raster icons on our buttons, such as a 16 x 16 PNG graphic of an Export icon, the size may be right for a small handheld device. But when the same page is viewed in a larger device that scales up the images, the icon will look less than its best. Of course, we can use larger icons to begin with and let them scale up or down, but there is a better way.
Our best bet is to use font icons. That is, fonts that are not letters, but come in the shape of familiar icons. Fonts resize to any size and still retain their sharpness. Their storage size is lighter than raster icons. If we use a font in place of a small icon, it will remain crisp no matter the resolution or size of the device. Who knows what larger resolutions and pixel densities are coming up in the future?
Here is how to add font icons to a button. Continue reading