CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
RubyMax
RubyMax

Reputation: 341

How to use CSS to change icon color

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.

Upvotes: 3

Views: 8293

Answers (3)

dfsq
dfsq

Reputation: 193261

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 ...
}

Upvotes: 1

Preben
Preben

Reputation: 1277

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

Upvotes: 0

Bob
Bob

Reputation: 106

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; }

Upvotes: 0

Related Questions