我正在为我的 UI 使用 Bootstrap 框架。我想将我的字形图标的颜色更改为蓝色，但不是在所有地方。在某些地方它应该使用默认颜色。
我已经提到了这两个链接，但我没有发现任何有用的东西。
请注意：我使用的是Bootstrap 2.3.2。
问问题
436801 次
12 回答
288
该图标将采用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;
}
这个小提琴有一个例子。
于 2013-08-20T12:32:56.683 回答
201
text-success只需在 Glyphicon 上应用 Twitter Bootstrap
类：
<span class="glyphicon glyphicon-play text-success">начал работу</span>
可用颜色的完整列表：Bootstrap 文档：Helper 类
（也有蓝色）
于 2014-09-01T21:38:33.197 回答
24
最后我自己找到了答案。要在 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>
于 2013-08-22T15:20:44.080 回答
7
你也可以这样做，希望对你有帮助
<span style="color:black"><i class="glyphicon glyphicon-music"></i></span>
于 2014-08-19T20:55:12.083 回答
7
对于 bootstrap 3.0，这对我有用：
.myclass .glyphicon {color:blue !important;}
于 2015-05-19T15:25:05.863 回答
3
我为 bootstrap 2.3.2 创建了一个备用颜色库，它可供对旧 glyphicons 库的更多颜色感兴趣的任何人使用且易于使用。
于 2013-09-05T07:04:27.037 回答
3
是的，您可以将图标设置为白色。这是它对我的工作方式。
Bootstrap <3
HTML
<i class="icon-ok icon-white"></i>
这将使您的图标显示为白色。
于 2013-11-15T07:00:45.123 回答
3
如果它只是一个引导图标。请注意，图标位于文本或排版下方。只需像这样添加文本颜色类。例如 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>
于 2017-10-22T15:09:57.623 回答
2
Bootstrap >= v4.0 放弃了 glyphicon 支持
删除了 Glyphicons 图标字体。如果您需要图标，一些选项是：
Glyphicons的上游版本
来源：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>
于 2018-01-03T04:17:02.633 回答
2
CSS：
.blue-icon{
color:blue !important;
}
HTML
<i class="fa fa-wrench blue-icon"></i>
Glyphicons 在 4.0 中被删除，我推荐 Font-awesome 4 或更新版本:)
于 2018-01-12T13:10:55.883 回答
1
以前的所有答案都是正确的，但是如果您只需要在一个地方使用一个图标来更改其颜色，这是一种简单快捷的方法：
<p style="color:green">Time icon: <span class="glyphicon glyphicon-time" ></span></p>
于 2018-07-29T17:38:34.227 回答
0
颜色不起作用，如果您使用引导字体 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);
于 2019-06-26T07:30:40.323 回答