Using CSS to give a black icon another color

Question

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.

enter image description here

did you looked up for this? https://developer.mozilla.org/en/CSS/-webkit-mask-image, and this http://en.wikipedia.org/wiki/Image_mask#Image_masks — jperelli, May 29 '12 at 16:39
Hey guys, I added my real code to this question. Is something wrong with my code? — John, May 29 '12 at 16:49
Yes, you need to put quoted strings in your `url` in the css. — Denys Séguret, May 29 '12 at 16:49
ok, quotes added. Still it only shows the black icon, not the orange color which i'm expecting — John, May 29 '12 at 16:51
without back.css it's hard to analyze. Can you put a minimal example on http://jsfiddle.net ? — Denys Séguret, May 29 '12 at 16:54
Just mentioend that the css code i posted is the entire back.css file — John, May 29 '12 at 16:55

score 23 · Accepted Answer · answered May 29 '12 at 17:13

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.

score 3 · Answer 2 · answered May 29 '12 at 16:58

Try use background image for your image, then use another div inside the first one to apply the alpha

    <style type="text/css">
        #image{background-image:url(/img/2012-05-24_1834.png);width:400px;height:400px;}
        #image #image_mask{background-color:red;width:400px;height:400px;opacity:0.4;filter:alpha(opacity=40); /* For IE8 and earlier */}
    </style>

</head>


<body>

        <div id="image">
                <div id="image_mask"></div>
       </div>
</body>

sry for not using your code, i started to work in your awnser before you posted it

Good idea on that opacity – Budianto IP Sep 21 '16 at 23:13 — Budianto IP, Sep 21 '16 at 23:13

Using CSS to give a black icon another color

2 Answers2

Linked