Как использовать CSS для изменения цвета значка

У меня есть класс статуса сообщения, который позволяет пользователям дифференцировать статус сообщения с помощью различных правил CSS цвета фона. Я хочу изменить цвет значка в сообщении, который размещается, например, с помощью <i class="glyphicon glyphicon-ok">.Как использовать CSS для изменения цвета значка

CSS-в настоящее время выглядит следующим образом:

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

Так просто хочет изменить цвет значка в DIV сообщений-статусе, в то время как в настоящее время он изменяет цвет фона.

Спасибо за ваше время.

источник

2015-02-06 RubyMax

Вы хотите различный цвет для каждого статуса? Или то же самое в статусе сообщения? – dfsq

Возможный дубликат [Можно ли добавить цвет для значков начальной загрузки только с помощью CSS?] (Http://stackoverflow.com/questions/12379153/can-i-add-color-to-bootstrap-icons-only-using-css) –

Я бы предположил, что создание нового селектора для .message-status i {} должно позволить вам изменить фон только тега изображения внутри него. –

Если предположить, что каждая иконка должна иметь цвет, определенный в контейнере состояния, вы можете сделать это:

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

источник

2015-02-06 20:04:03 dfsq

Это работало очень хорошо для меня, спасибо @dfsq – RubyMax

Я не уверен, что он подходит вам:

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

источник

2015-02-06 19:59:22 Muszla

Если вы хотите изменить цвет для этой конкретной иконы (а не другие значки, которые имеют тот же класс .message-статус, просто добавить еще один класс к тому же DIV/пролете, так как это либо с помощью JavaScrip (JQuery selecors) или с помощью перезагрузки страницы

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

И в вашем CSS дополнения:..

.newcolor { color:#444 !important;}

Если цвет должен следовать .status1, и т.д., то СОСТОЯНИЕ 2 мы должны Т.Л. изменить это немного

источник

2015-02-06 19:59:58 Preben

Как использовать CSS для изменения цвета значка

ответ

Смежные вопросы