On the other hand, image icons can't change color on the fly or be dynamically upscaled, both of which are requirements when you are building a framework that is meant to be themed by users.
Re:Kickstrap: Enhancements for Bootstrap
by harisenbon on Tuesday April 03, 2012 @09:12PM
(#3795686)
You can use png masks to create an icon, and then change the background color of the element below it. You can also use image scaling to make the icon any size you need.
http://www.cssbakery.com/2009/06/background-image.html
SenchaTouch does this for all their button icons.
The downside is that you can't use spritesheets, because each image needs to be inserted with an image tag, not a background image.
This is exactly why we need blend modes (at least multiply+screen) in CSS.
Have you viewed them on a new iPad? Much sharper than PNG/GIF. Even on "standard" res tablets, if an image-based UI element is scaled in any capacity, the smoothing renders it as blurry as an antialiased font or SVG.
They don't save additional requests (if you use spritesheets), are not smaller (2 color gif vs. full vector font), and most importantly, and why no decent designer would ever use them in small sizes, is that they absolutely lack any sharpness! Look at the QR code icon on their demo. It's a mess.