使用 Bootstrap 2在某些地方将象形文字的颜色改为蓝色，但不要在所有地方都改为蓝色

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

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

请注意: 我正在使用 Bootstrap 2.3.2。

450835 次浏览
小开

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

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

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

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

超文本标示语言

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

CSS

.blue {
color: blue;
}

这个小提琴 有一个例子。

小开
最佳答案

最后我自己找到了答案。要在2.3.2引导程序中添加新的图标，我们必须在文件中添加 Font Awsome css。这样做之后，我们可以用 css 覆盖样式来改变颜色和大小。

<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

CSS

.brown{color:#9b846b}

如果我们想改变图标的颜色，然后只需添加棕色类和图标将变成棕色。它还提供了各种大小的图标。

超文本标示语言

<p><i class="icon-camera-retro icon-large brown"></i> icon-camera-retro</p> <!--brown class added-->
<p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>
小开

我创建了一个替代 用于引导2.3.2的颜色库，它是可用和简单使用的任何人感兴趣的更多颜色的旧象形文字库。

小开

是的，您可以将图标设置为白色。 我是这么做的。

Bootstrap <3

超文本标示语言

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

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

小开

你也可以这么做，希望能有所帮助

<span style="color:black"><i class="glyphicon glyphicon-music"></i></span>
小开

只要用 Bootstrap 关于雕像的 text-success课程:

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

enter image description here

可用颜色的完整列表: Bootstrap 文档: Helper 类
(蓝色也出现了)

小开

对于 bootstrap 3.0来说，这对我很有用:

.myclass .glyphicon {color:blue !important;}
小开

如果它只是一个引导程序图标。请注意，图标是在文本或更确切地说，排版。像这样添加文本颜色类。例如文本-主要的，文本-信息等等到图标类:

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

Bootstrap > = v4.0缺少对字形的支持

删除了 Glyphicon 图标字体。如果你需要图标，一些选项是:

雕文的上游版本

Octicons

超赞字体

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

如果您正在使用 Bootstrap > = v4.0或更新的版本，您可以使用现有的引导样式类，如 text-success、 text-warning等。

例如，如果你正在使用 fontawest:

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

CSS:

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

超文本标示语言

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

雕文在4.0中被删除，我推荐 Font-Awesome 4或更新:)

小开

以前的答案都是正确的，但是如果你只需要在一个地方用一个图标来改变颜色，这里有一个简单快捷的方法:

   <p style="color:green">Time icon: <span class="glyphicon glyphicon-time" ></span></p>

enter image description here

小开

颜色不工作，如果你使用的引导字体 png 图像，作为我。

[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
width: 14px;
height: 14px;
margin-top: 1px;
*margin-right: .3em;
line-height: 14px;
vertical-align: text-top;
background-image: url("../img/glyphicons-halflings.png");
background-position: 14px 14px;
background-repeat: no-repeat;
}

HTML5使用 css 过滤器对图像着色，例如

filter: invert(100%)  contrast(2) brightness(50%) sepia(40%) saturate(450%) hue-rotate(-50deg);

提交答案