在Bootstrap 2中，将一些（但不是全部）glyphicons的颜色更改为蓝色

Question

我正在使用Bootstrap框架构建我的用户界面。我想将我的glyphicons的颜色更改为蓝色，但不是在所有地方。在某些地方，它应该使用默认颜色。

我参考了这两个链接，但没有找到任何有用的信息。

- 我可以仅使用CSS为bootstrap图标添加颜色吗？ - 如何将Bootstrap 3的glyphicons更改为白色？ 请注意：我正在使用Bootstrap 2.3.2。

- Mike Phils

---

更新：对于BS4，只需将“text-primary”添加到图标的类中即可。 - Martin CR

Answer 1

该图标将采用其父级元素的 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>

.blue {
    color: blue;
}

这个代码片段有一个例子。

- Vikas Ghodke

---

谢谢。我正在使用 Bootstrap /2.3.2/，但它对我来说不起作用。 - Mike Phils

你仍然可以使用它，删除所有glyphicon的css规则，并添加此CSS文件http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap-glyphicons.css并从bootstrap 3中下载glyphicon字体，这将解决问题。 - Vikas Ghodke

@VikasGhodke，这仍然需要将整个项目迁移到版本3。 - Maksim Vi.

Answer 2

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

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

可用颜色的完整列表：Bootstrap文档：辅助类
（蓝色也在其中）

- itsnikolay

---

为什么要将橙子和苹果混在一起呢？:\ - USer22999299

“начал работу”翻译成英文是“started a work”。我当时匆忙回答，没想到会被投票高。因此，为了展示标记的样子，我在之前的应用程序中拍摄了俄语截图。请注意，翻译过程中要保持原意，使内容更加通俗易懂。 - itsnikolay

如果必须显示图标以表示操作成功，我认为非常合适。 - Terix

这样做更好，因为所应用的颜色将符合当前的Bootstrap主题颜色方案。 - Remus Rusanu

@naXa 尝试使用 text-danger。这里有一个完整列表的颜色。 - naXa stands with Ukraine

@naXa 谢谢！我修复了链接！ - itsnikolay

Answer 3

最终我自己找到了答案。在2.3.2版的Bootstrap中添加新图标，我们需要在文件中添加Font Awesome 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>

- Mike Phils

---

较新的版本（此评论时为4.0.3）可在http://www.bootstrapcdn.com/#fontawesome_tab上获得。 - wizulus

Answer 4

你也可以这样做，希望能帮到你。

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

- Guven Sezgin Kurt

Answer 5

对于Bootstrap 3.0，以下方法适用：

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

- puddleglum

Answer 6

如果只是Bootstrap图标，请注意图标在文本或排版下。只需像这样添加文本颜色类，如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>

- White.Raven

Answer 7

是的，您可以将图标设置为白色。以下是我使用的方法。

Bootstrap <3

HTML

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

这会使你的图标呈现为白色。

- A.J.

---

icon-white 可以在 Bootstrap 2 中使用。虽然问题是要求蓝色的图标，但知道有一个单独的类可以让图标变为白色似乎很方便。 - smholloway

Answer 8

我为Bootstrap 2.3.2创建了另一种颜色库，可以扩展旧版Glyphicons库的颜色选择，该库适用于任何对更多颜色有兴趣且希望使用简单的人。 （链接）

- Eric Uldall

Answer 9

CSS：

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

HTML

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

Glyphicons已在4.0中被移除，我建议使用Font-awesome 4或更新版本 :)

- Michael Jørgensen

Answer 10

Bootstrap >= v4.0不再支持Glyphicons图标字体。如果您需要图标，以下是一些选项：

Glyphicons的上游版本

Octicons

Font Awesome

来源：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>

- Caner