Html 使用 Bootstrap 2 在某些地方将字形的颜色更改为蓝色 - 但不是在所有地方
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18334851/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change the color of glyphicons to blue in some- but not at all places using Bootstrap 2
提问by Mike Phils
I am using the Bootstrap framework for my UI. I want to change the color of my glyphicons to blue, but not in all places. In some places it should use the default color.
我正在为我的 UI 使用 Bootstrap 框架。我想将字形的颜色更改为蓝色，但不是在所有地方。在某些地方，它应该使用默认颜色。
I have referred to these two links, but I am not finding anything helpful.
我已经提到了这两个链接，但我没有发现任何有用的东西。
- Can I add color to bootstrap icons only using CSS?
- How do I change Bootstrap 3's glyphicons to white?
Please note: I am using Bootstrap 2.3.2.
请注意：我使用的是Bootstrap 2.3.2。
采纳答案by Mike Phils
Finally I found answer myself. To add new icons in 2.3.2 bootstrap we have to add Font Awsomecss in you file. After doing this we can override the styles with css to change the color and size.
最后我自己找到了答案。要在 2.3.2 引导程序中添加新图标，我们必须在您的文件中添加Font Awsomecss。完成此操作后，我们可以使用 css 覆盖样式以更改颜色和大小。
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
CSS
CSS
.brown{color:#9b846b}
If we want change the color of icon then just add brown class and icon will turn in brown color. It also provide icon of various size.
如果我们想改变图标的颜色，那么只需添加棕色类，图标就会变成棕色。它还提供各种大小的图标。
HTML
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>
回答by Vikas Ghodke
The icon will adopt the color from value of the colorcss property of it's parent.
图标将采用来自color其父级 css 属性值的颜色。
You can either add this directly to the style:
您可以将其直接添加到样式中：
<span class="glyphicon glyphicon-user" style="color:blue"></span>
Or you can add it as a class to your icon and then set the font color to it in CSS
或者您可以将它作为一个类添加到您的图标中，然后在 CSS 中为其设置字体颜色
HTML
HTML
<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-user blue"></span>
<span class="glyphicon glyphicon-trash"></span>
CSS
CSS
.blue {
color: blue;
}
This fiddlehas an example.
这个小提琴有一个例子。
回答by itsnikolay
Simply apply Twitter Bootstrap
text-successclass on Glyphicon:
只需text-success在 Glyphicon 上应用 Twitter Bootstrap
类：
<span class="glyphicon glyphicon-play text-success">начал работу</span>
Full list of available colors: Bootstrap Documentation: Helper classes
(Blue is present also)
可用颜色的完整列表：Bootstrap 文档：Helper 类
（蓝色也存在）
回答by puddleglum
For bootstrap 3.0, this worked for me:
对于 bootstrap 3.0，这对我有用：
.myclass .glyphicon {color:blue !important;}
回答by Guven Sezgin Kurt
You can do this as well, hopeit helps
你也可以这样做，希望有帮助
<span style="color:black"><i class="glyphicon glyphicon-music"></i></span>
回答by Eric Uldall
I created an alternate colors library for bootstrap 2.3.2it's available and simple to use for anyone interested in more colors for the old glyphicons library.
我为 bootstrap 2.3.2创建了一个替代颜色库，它可供任何对旧 glyphicons 库的更多颜色感兴趣的人使用且易于使用。
回答by A.J.
Yes, you can set the icons to the white color. here is how it worked for me.
是的，您可以将图标设置为白色。这是它对我的工作方式。
Bootstrap <3
Bootstrap <3
HTML
HTML
<i class="icon-ok icon-white"></i>
This would make your icon appear white.
这将使您的图标显示为白色。
回答by White.Raven
If it is only a bootstrap icon. Note that icons are under text or rather typography. Just add the text color class like this. E.g text-primary, text-info and so on and so forth to the icon class:
如果它只是一个引导程序图标。请注意，图标位于文本或排版下方。只需像这样添加文本颜色类。例如 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>
回答by Caner
Bootstrap >= v4.0 dropped glyphicon support
Bootstrap >= v4.0 删除了 glyphicon 支持
Dropped the Glyphicons icon font. If you need icons, some options are:
the upstream version of Glyphicons
删除了 Glyphicons 图标字体。如果您需要图标，一些选项是：
Glyphicons的上游版本
Source: https://v4-alpha.getbootstrap.com/migration/#components
来源：https: //v4-alpha.getbootstrap.com/migration/#components
If you are using Bootstrap >= v4.0 or newer, you can use existing style classes of bootstrap such as text-success,text-warningetc.
如果使用的是引导> = V4.0或更高版本，可以使用现有的自举的风格类，如text-success，text-warning等。
For example, if you are using fontawesome:
例如，如果您使用 fontawesome：
<i class="fa fa-tag text-danger" aria-hidden="true"></i>
回答by Michael J?rgensen
CSS:
CSS：
.blue-icon{
color:blue !important;
}
HTML
HTML
<i class="fa fa-wrench blue-icon"></i>
Glyphicons are removed in 4.0, i recommend Font-awesome 4 or newer :)
Glyphicons 在 4.0 中被删除，我推荐 Font-awesome 4 或更新版本:)
