html - 在某些情况下将glyphicons的颜色更改为蓝色,但不是在所有使用Bootstrap 2的地方



css twitter-bootstrap-2 (7)

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

我已经提到了这两个链接,但我没有找到任何有用的东西。

请注意:我正在使用Bootstrap 2.3.2

https://ffff65535.com


Bootstrap> = v4.0丢弃了glyphicon支持

丢弃了Glyphicons图标字体。 如果你需要图标,一些选项是:

Glyphicons的上游版本

Octicons

字体真棒

来源: https://v4-alpha.getbootstrap.com/migration/#componentshttps://v4-alpha.getbootstrap.com/migration/#components

如果您正在使用Bootstrap> = v4.0或更新版本,则可以使用现有样式类的引导程序,例如text-successtext-warning等。

例如,如果您使用fontawesome:

<i class="fa fa-tag text-danger" aria-hidden="true"></i>

CSS:

.blue-icon{
color:blue !important;
}

HTML

<i class="fa fa-wrench blue-icon"></i>

在4.0中移除字形,我推荐Font-awesome 4或更新:)


只需在图标上应用Bootstrap 3 text-success类:

<span class="glyphicon glyphicon-play text-success">начал работу</span>

有更多的颜色: Bootstrap文档:助手类
(蓝也存在)


如果它只是一个引导程序图标。 请注意,图标在文字下或排版上。 只需像这样添加文本颜色类。 例如text-primary,text-info等等等等到图标类:

<i class="icon features-icon icons8-collaboration-2 text-primary"></i>
<i class="icon features-icon icons8-collaboration-2 text-secondary"></i>


是的,您可以将图标设置为白色。 这是它如何为我工作。

Bootstrap <3

HTML

<i class="icon-ok icon-white"></i>

这会使您的图标显示为白色。


该图标将采用来自其父级的color CSS属性值的color

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

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

这个小提琴有一个例子。





twitter-bootstrap-2