I recently have the same question and I think this approach is worth sharing for future readers.
Try this
filter: brightness(50%) sepia(100) saturate(100) hue-rotate(25deg);
Brightness will darken the image, sepia will make it a bit yellowish, saturate to increase the color, and lastly hue-rotate to change the color.
It’s not cross browser friendly though:
-
It’s not supported on IE
-
On chrome,
hue-rotate(25deg)
will make any image red, but you need
negative value in firefox e.g.hue-rotate(-25deg)
to make it red.
You can use this to target mozilla browsers:
https://css-tricks.com/snippets/css/css-hacks-targeting-firefox/
Here are some useful tips and tools that I’ve used when I work with images/icons using css:
- If you have the svg version of the image, you can convert them to
font icons using this tool https://icomoon.io/ . To change color you just needcolor:#f00;
just like font colors. - If you need to achieve this effect for hover state, Use red image with
filter: brightness(0) invert();
on NON-hover state, andfilter: brightness(1);
on hover state. Hovever this will still won’t work on IE - Use sprite sheet. You can create yourself using image editing tool or use sprite sheet generators available online. Then, you can use SpriteCow to get the css for every sub-image of your spritesheet.