Using CSS to give a black icon another color

css, masking

Solution

Your code isn't working because the `src` attribute is being used to show up the black version on top of the orange version. You will be able to get the desired result only with CSS, this way:

.dashboard-buttons .sessions .img { width: 60px; height: 60px; background-color: #C60; }
.dashboard-buttons .sessions .img { -webkit-mask-image: url('https://i.stack.imgur.com/gZvK4.png'); }

Here is the changed HTML snippet:

<div class="dashboard-buttons">
   <a href="sessions.php" class="sessions">
       <div class="img"></div>
       <span>Sessions</span>
   </a>
</div>​

And here is a working sample of it.

Problem

I saw some apps where even though a black icon was included, some how the app used CSS to convert the icon into a different colour. I can't seem to repeat this process Here's my back.css file: ``` .dashboard-buttons a { width: 80px; height: 80px; border: 1px solid #ccc; margin: 0px 5px; display:inline-block; border-radius: 10px; background:white; text-decoration:none; -moz-box-shadow: inset 0 0 15px rgba(0,0,0, 0.25); -webkit-box-shadow: inset 0 0 15px rgba(0,0,0, 0.25); } .dashboard-buttons a:hover { text-decoration:underline; } .dashboard-buttons span, .dashboard-buttons img { display:inline; font-size: 12px; font-weight:bold; } .dashboard-buttons .sessions img { background-color:#C60; } .dashboard-buttons .sessions img { -webkit-mask-image:url(mobile/images/calendar2.png) } ``` And the html code looks like this: ``` <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="back.css" /> <title>West</title> </head> <body> <div class="dashboard-buttons"> <a href="sessions.php" class="sessions"> <img src="mobile/images/calendar2.png"> <span>Sessions</span> </a> </div> </body> </html> ``` But it's not working in my chrome browser. Am i missing something? Additional notes I only need to support modern webkit browsers. Don't need to worry about IE or anything else. I posted my code here http://jsfiddle.net/ZnbF3/ . First time using jsfiddle, hopefully it's working? If not, just copy the html file and css file i already posted above. I have the calendar2.png attached to this question.

Original source