Question

我有一个消息状态类，允许用户使用不同的背景颜色CSS规则区分消息状态。我希望只更改消息中图标的颜色，例如使用<i class="glyphicon glyphicon-ok">放置。

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中的图标颜色，而它当前会改变背景颜色。

感谢您的时间。

Answer 1

假设每个图标都应该具有状态容器定义的颜色，您可以这样做：

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

Answer 2

我不确定这适合你：

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

Answer 3

如果您想更改此特定图标的颜色（而不是其他具有相同类别.message-status的图标，只需将另一个类添加到与此相同的div / span中。或者通过javascrip（ jquery selecors）或通过重新加载页面。

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

在CSS中添加：

.newcolor { color:#444 !important;}

如果颜色应该遵循.status1，status2等，那么我们需要稍微修改一下

如何使用CSS更改图标颜色

3 个答案: