I have a transparent, grey-scale PNG of an icon. I want to be able to change it's color like a font-icon.
A few more details: The PNGs have outer transparencies and inner white areas for the actual "icon", plus a small greyscale gradient so they have good-looking "fuzzy" edges. I'm armed with Image Magic, so I don't mind if I have to take negatives / otherwise perform transformations on the PNG prior to any solution.
Why I can't just use a font-icon set: We have some custom, proprietary icons we're using, and I've spend hours trying to convert them to a font-icon set with no success. So I'm unlikely to find our icons out there, and I can't get our icons into a font-icon set. I could be doing it wrong, or I could have no found the right tool.
So my next best bet looks to be using CSS "Masking", only I can't get that work. The idea would be to set the background of the div to the correct color, and then mask out the div so only the part that corresponds to the icon is visible... but I can't get that working, either.
I'm open to any ideas, but my gut says the CSS stuff is the "way to go", unless there's some PNG->Font tool I haven't found.
So to reiterate: I have a greyscale PNG with transparency, and I need to show it on a website with a "font-color" set by CSS.
Any ideas? (Thanks!)
Using masking for that isn't hard:
.filtered {
width:200px;
height:200px;
position:relative;
background-color: red;
-webkit-mask-size: 100% 100%;
-webkit-mask-image: url(http://i35.tinypic.com/2091450.png);
mask-size: 100% 100%;
mask-image: url(http://i35.tinypic.com/2091450.png);
}
But you won't get much support for old browsers