How to use CSS to change icon color

Question

I have a message-status class that allows users to differentiate a message status using different background color CSS rules. I'm looking to only change the colour of the icon in the message, which is placed using <i class="glyphicon glyphicon-ok"> for example.

The CSS currently looks like this:

.message-status {
    padding:18px 24px;
    margin:0 0 24px;
    border-radius:4px;
    color:#fff;
    h2 { margin-top:0; }
    &.status1 { background:#35c671; }
    &.status2 { background:#565a5c; }
    &.status3 { background:#565a5c; }
    &.status4 { background:#565a5c; }
    &.status5 { background:#565a5c; }
}

So just looking to change the icon colour within the message-status div, whereas it currently changes the background colour.

Thank you for your time.

You want different color per status? Or ther same in .message-status ? — dfsq, Feb 06 '15 at 19:48
possible duplicate of [Can I add color to bootstrap icons only using CSS?](http://stackoverflow.com/questions/12379153/can-i-add-color-to-bootstrap-icons-only-using-css) — D-side, Feb 06 '15 at 19:49
I would guess that making a new selector for .message-status i {} should then allow you to change the background of just the image tag within it. — Paul Zepernick, Feb 06 '15 at 19:49
Yes, you can. `color` property, icons inherit their color from the text they're in. And that makes sense, since they're just symbols from an icon font, much like text. — D-side, Feb 06 '15 at 19:49

score 1 · Accepted Answer · answered Feb 06 '15 at 20:04

Assuming that every icon should have the color defined by the status container, you can do this:

.message-status {
    padding:18px 24px;
    margin:0 0 24px;
    border-radius:4px;
    color:#fff;
    h2 { margin-top:0; }

    &.status1 { 
        background:#35c671; 
        .glyphicon { color: #001; }
    }
    &.status2 { 
        background:#565a5c; 
        .glyphicon { color: #002; }
    }
    // etc ...
}

score 0 · Answer 2 · answered Feb 06 '15 at 19:59

I'm not sure this it fit you :

.message-status {
    padding:18px 24px;
    margin:0 0 24px;
    border-radius:4px;
    color:#fff;
    h2 { margin-top:0; }
    &.status1 { background:#35c671; }
    &.status2 { background:#565a5c; }
    &.status3 { background:#565a5c; }
    &.status4 { background:#565a5c; }
    &.status5 { background:#565a5c; }
}

    .status1 .glyphicon { color:#35c671; }
    .status2 .glyphicon { color:#565a5c; }
    .status3 .glyphicon { color:#565a5c; }
    .status4 .glyphicon { color:#565a5c; }
    .status5 .glyphicon { color:#565a5c; }

score 0 · Answer 3 · answered Feb 06 '15 at 19:59

If you'd like to change the color for this specific icon (and not other icons that has the same class .message-status , just add another class to the same div/ span as this. Either via javascrip (jquery selecors) or via reload of the page.

<div class="message-status newcolor"> ...  <i class="glyphicon glyphicon-ok"> ... </div>

And in your CSS add:

.newcolor { color:#444 !important;}

If the color should follow the .status1 , status2 etc then we need tl alter this a bit

How to use CSS to change icon color

3 Answers3