如何将 Bootstrap 3 的字形图标更改为白色？ [复制]

Posted 2023-03-06

【中文标题】如何将 Bootstrap 3 的字形图标更改为白色？ [复制]

【英文标题】：How do I change Bootstrap 3's glyphicons to white? [duplicate]

【发布时间】：2013-08-06 21:04:10

【问题描述】：

我的页面中有字形图标，但它们是黑色的。如何将字形图标设置为白色？

【问题讨论】：

glyphicons 是字体，而不是图像。所以你可以使用 css 字体属性来设置它的样式。 （包括颜色、旋转、缩放）。是的

这个问题被错误地标记为重复（或至少指向一个不重复的问题）。这个问题指的是 bootstrap-3，其中图标由 glyphicons 字体（不是图像资产）表示。重复标志所指的问题是指使用图像作为图标的旧引导程序。虽然它提到了许多替代方案，但它从未足够简洁地回答这个具体问题，以至于我称之为重复。我发现这里接受的答案非常有帮助。

【参考方案1】：

您可以创建自己的 .white 类并将其添加到 glyphicon 元素。

.white, .white a 
  color: #fff;

<i class="glyphicon glyphicon-home white"></i>

【讨论】：

嗯。为什么投反对票？这似乎是正确的。

@kba: 诚然，我不使用 Bootstrap，但是 Bootstrap 3 → Glyphicons for Bootstrap → repository → webfonts。看来要退房了。

我做了类似的事情，但是给 CSS 类一个引导式的名称“glyphicon-inverse”。

所有的字形图标都有一个反转。也就是说，另一个颜色相反的图标（黑色和白色）。 CSS 在我看来是多余的。

为了具体等原因，CSS选择器可能会更好.glyphicon.white。