Question

问题是当我的菜单标签项处于活动状态时（如此处的第一个） - 图标会自动变为白色并且不可见。如何将图标的颜色更改为黑色？有课程可以使它成为白色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>

Answer 1

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

只有两种可用的颜色;默认的深灰色和白色。你不能将颜色改为其他颜色，因为它们是从静态的{{1}}中抓取的。

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

Answer 2

确实有一种改变颜色的方法：

转到 bootstrap.min.css

并搜索 .bs-glyphicons li：hover

并将'颜色：#fff '更改为'颜色：＃000 '（或您想要的任何颜色）

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

如何将twitter bootstrap中的图标颜色更改为黑暗？

2 个答案: