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

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

You could try avoiding JQuery all together and use just plain old css and html. The code shows the concept, but you'll need to adjust the dimensions to make it work. You might find that using border-radius:100% more useful. Then you can apply :hover styles as necessary.

  <div class="outer-circle">
   <div class="inner-circle">
      <div class="triangle">
      </div>
  </div>
</div>

<style>
    .outer-circle {
        padding: 15px 0 0 15px;
        width: 150px;
        height: 150px;
        background: black;
        -moz-border-radius: 80px;
        -webkit-border-radius: 80px;
        border-radius: 80px;

    }

    .inner-circle {

        width: 135px;
        height: 135px;
        background: white;
        -moz-border-radius: 80px;
        -webkit-border-radius: 80px;
        border-radius: 80px;
        position:relative;
    }


    .triangle {
        width: 0;
        height: 0;
        border-top: 40px solid transparent;
        border-left: 80px solid black;
        border-bottom: 40px solid transparent;
        position: absolute;
        top:25px;
        left: 35px;
    }
</style>

Answer 3

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