使用Bootstrap 2在某些位置但并非在所有位置将字形的颜色更改为蓝色

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

我已经提到了这两个链接，但没有发现任何帮助。

• 我可以仅使用CSS向引导图标添加颜色吗？
• 如何将Bootstrap 3的glyphicons更改为白色？

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

图标将采用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;
}

这个小提琴有一个例子。

只需text-success在Glyphicon上应用Twitter Bootstrap 类：

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

可用颜色的完整列表：Bootstrap文档：Helper类
（也存在蓝色）

终于我找到了答案。要在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}

如果我们要更改图标的颜色，则只需添加棕色类，图标将变为棕色。它还提供各种大小的图标。

的HTML

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

您也可以执行此操作，希望对您有所帮助

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

对于bootstrap 3.0，这对我有用：

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

是的，您可以将图标设置为白色。这就是它为我工作的方式。

Bootstrap <3

的HTML

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

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

我为bootstrap 2.3.2创建了一个备用颜色库，它对那些对旧glyphicons库有更多颜色感兴趣的人可以轻松使用。

如果只是一个引导图标。请注意，图标位于文本下方，或者是字体下方。只需添加这样的文本颜色类。例如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> = v4.0放弃了glyphicon支持

删除了Glyphicons图标字体。如果需要图标，则一些选项为：

Glyphicons的上游版本

Octicons

字体很棒

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

如果您使用的是Bootstrap> = v4.0或更高版本，则可以使用Bootstrap的现有样式类，例如text-success，text-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中删除了Glyphicons，我建议使用Font-awesome 4或更高版本:)

先前的所有答案都是正确的，但是如果您只需要在一个位置更改一个图标的颜色，那么这是一种简单快捷的方法：

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

颜色不起作用，如果您将引导字体PNG图像用作i，

[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);