在某些情况下将字形的颜色更改为蓝色，但不能使用Bootstrap 2

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

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

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

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

Answer 1

该图标将采用来自其父级的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; } 

这个小提琴有一个例子。

Answer 2

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

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

有更多的颜色： Bootstrap文档：助手类
（蓝也存在）

Answer 3

最后我自己find了答案。 要在2.3.2引导中添加新的图标，我们必须在你的文件中添加字体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> 

Answer 4

对于bootstrap 3.0，这为我工作：

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

Answer 5

你也可以这样做，希望有帮助

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

Answer 6

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

Bootstrap <3

HTML

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

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

Answer 7

我为bootstrap 2.3.2创build了一个备用颜色库，它对于那些对旧的glyphicons库感兴趣的用户来说是可用和简单的。

Answer 8

如果它只是一个引导程序图标。 请注意，图标是在文字或印刷术下。 只需像这样添加文本颜色类。 例如，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>