Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Joel David Crouse
Joel David Crouse
9,062 Points

is it possible to make a black icon white using css?

I have a black png icon that I need to make white. Is it possible to do this using css?

3 Answers

Hugo Paz
Hugo Paz
15,622 Points

You can use a filter to do it. https://developer.mozilla.org/en-US/docs/Web/CSS/filter

If you want to change the colour from black to white just add the following class to the image:

.invert{
    -webkit-filter: invert(100%);
}

Its not supported in all browsers, i just tried it on chrome and it worked.

Chris Shaw
Chris Shaw
26,676 Points

If you're ever unsure of which properties/technologies are supported in different browsers Can I Use has the most comprehensive list and uses real world statistics as a base for determining the earliest browser to support.

http://caniuse.com/#search=filter

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

If it's an SVG it's easy, otherwise not as much.

Chris Shaw
Chris Shaw
26,676 Points

These days especially with IE8 slowly dropping in users SVG is the much more popular option and it's one that I use or at least try to use on all projects given I have a vector object to work with.

Charmaine Wallace
Charmaine Wallace
22,276 Points
Charmaine Wallace
Charmaine Wallace
22,276 Points

Certainly not easily and reliably across all browsers. If it were me, the quick and dirty fix would be dump it in Photoshop or even ipiccy online and just change it there.