如何使用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; } 
}

所以只是希望更改消息狀態專區內的圖標顏色，而它目前改變的背景顏色。

謝謝你的時間。

來源

2015-02-06 RubyMax

你想每個狀態不同的顏色？或者.message-status？ – dfsq 2015-02-06 19:48:56

可能的重複[只能使用CSS爲引導圖標添加顏色？]（http://stackoverflow.com/questions/12379153/can-i-add-color-to-bootstrap-icons-only-using-css） – 2015-02-06 19:49:13

我猜想爲.message-status i {}創建一個新選擇器應該允許您更改其中的圖像標記的背景。 – 2015-02-06 19:49:19

假設每個圖標應該由狀態容器定義的顏色，你可以這樣做：

.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 2015-02-06 21:06:20

我不知道這一點，適合你：

.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/SPAN因爲這要麼通過的javascrip（jQuery的selecors）或通過頁面的重載

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

而在你的CSS。地址：

.newcolor { color:#444 !important;}

如果顏色應遵循.status1，狀態2等那麼我們就需要TL這種改變有點

來源

2015-02-06 19:59:58 Preben

如何使用CSS更改圖標顏色

回答

相關問題