如何将 twitter bootstrap 中的图标颜色更改为深色？答案

【问题标题】：How to change icon color in twitter bootstrap to dark?如何将 twitter bootstrap 中的图标颜色更改为深色？
【发布时间】：2012-09-23 15:49:20
【问题描述】：

问题是，当我的菜单选项卡项处于活动状态时（就像这里的第一个） - 图标会自动变为白色并且不可见。如何将图标的颜色更改为黑色？有课程可以让它变白icon-white，但没有课程可以让它变暗。

<ul class="nav nav-tabs">
<li class="active">
    <a href="#">
        <i class="icon-fire"></i> Newest</a>
</li>
<li>
    <a href="#">
        <i class="icon-star"></i> Most popular</a>
</li>
<li>
    <a href="#">
        <i class="icon-heart"></i> Etc.</a>
</li>
</ul>

【问题讨论】：

标签： css twitter-bootstrap icons

【解决方案1】：

您可以尝试通过将其添加到您的图标来覆盖.active 样式：background-image: url("../img/glyphicons-halflings.png") !important;（您可能需要调整路径，但可能不会）。

只有两种可用的颜色；默认的深灰色一种，白色的一种。您不能将颜色更改为这两个以外的颜色，因为它们是从静态精灵png 中获取的。

要更好地控制此类图标的大小及其颜色，请查看Font Awesome，它与Bootstrap 集成。它使您可以完全控制，因为图标以矢量格式保存为字体。

【讨论】：

感谢您的回答。我认为有办法改变颜色，但如果不是......无论如何，我几天前检查过 Font Awesome 但不太喜欢他们的图标，所以决定不使用它们（也许，未来版本的 Bootstrap 会添加一些灵活性或更多颜色:) - 谁知道？）。但是有没有办法将这个示例图标更改为黑色，而不是白色？（因为<li class="active">而变白）
是的，谢谢 :) 确实有效，但我稍微修改了图像的路径。

【解决方案2】：

确实有办法改变颜色：

只需转到 bootstrap.min.css

然后搜索 .bs-glyphicons li:hover

并将 'color: #fff' 更改为 'color : #000' （或任何你想要的颜色）

我为我的一个项目测试了它，它运行良好。希望这对您也有帮助。

【讨论】：