How can I change color of icon image using CSS? [duplicate]

Question

I am trying to figure out how to change the color of an image that is half transparent and half solid color.

I want to be able to change the color of the white so I can add a hover, and add the ability to have a dynamic way to change the colors in wordpress. Using photoshop to fill the image isn't an option because I am going to build a color changer in to my Wordpress theme.

I used a jQuery script called JFlat.js, because it seemed like EXACTLY what I needed. Although it doesn't seem to work at all for me. Following the exact steps I am guessing it is because it uses an old version of jQuery.

Can anyone offer me some assistance?

Here is a black version on the image, you can't see the white one so I will post this one for a better of idea of what I am talking about.

Answer 1

For what it's worth, this can also be done with svg

FIDDLE

Check out google's online svg-editor - which I used to produce the svg. (except for the css classes which I added later on)

svg

<svg class="play" width="252" height="252" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <g>
  <title>Layer 1</title>
  <circle class="outer" r="123.16656" cy="128" cx="128" 0 fill="#000000"/>
  <circle class="inner" r="97" cy="127" cx="128" fill="#ffffff"/>
  <path class="triangle" transform="rotate(89.2704 134.893 125.778)" id="svg_6" d="m93.75,161.77814l41.14282,-72l41.14288,72l-82.28571,0z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null"  fill="#000000"/>
 </g>
</svg>

css

.play:hover .outer, .play:hover .triangle
{
    fill: #fff;
}
.play:hover .inner
{
    fill: #000;
}

Answer 2

Use an SVG icon, this one comes from Iconic. Icon melon is also good

Otherwise you could use a font-icon, this one comes from FontAwesome

If you must, you can use a CSS Filter but it is only supported in newer browsers. The best fallback would be to use SVG filter to do the same thing and use a data URL to apply it. Demo

-webkit-filter: invert(100%);

You could also use a sprite like agconti suggested