html - 使用 Bootstrap 2 在某些地方(但不是在所有地方)将字形图标的颜色更改为蓝色

Question

我正在为我的 UI 使用 Bootstrap 框架。我想将字形图标的颜色更改为蓝色，但不是在所有地方。在某些地方它应该使用默认颜色。

我已经引用了这两个链接，但没有找到任何有用的信息。

• Can I add color to bootstrap icons only using CSS?
• How do I change Bootstrap 3's glyphicons to white?

请注意:我使用的是 Bootstrap 2.3.2。

Answer 1

图标将采用其父级的 color css 属性值的颜色。

您可以直接将其添加到样式中:

<span class="glyphicon glyphicon-user" style="color:blue"></span>

或者您可以将它作为一个类添加到您的图标中，然后在 CSS 中为其设置字体颜色

HTML

<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-user blue"></span>
<span class="glyphicon glyphicon-trash"></span>

CSS

.blue {
    color: blue;
}

This fiddle有一个例子。