How to change color of png on hover?

Question

I made a \"down arrow\" in illustrator and saved it as a png with a transparent background. When I put it into my webpage as an img, it shows up in the original color, which

Answer 1

I was also wondering about an easy way to do it like:

.img:hover {
      background: red;
}

or

.img:hover {
      color: red;
}

but no easy cross-browser support solutions were found. However, I found that some of the browser solutions were using SVG images that have a fill attribute which can be easily set by CSS.

However, if you use font-awesome (basically, it's a font where instead of characters you have different icons), it's easy to control with simple CSS attribute color, like in the second example

So, if you want the easiest solution - find SVG images for your project that correspond to the ones you use. I found this process a little bit painful and decided to learn how to convert png and .jpg and .png to .svg. There is a command-line tool that helps you do so and it's called potrace. One thing I would recommend looking at if you decide to use this tool is to use simple editors to contrast dark for everything you want to have converted into path for the given .svg and white/light (not transparent) colors to the background and the areas you don't want to see in your .svg file.