Question

我如何更改glyphicon的颜色？当前颜色显示为黑色，我想将其更改为白色。我尝试这样做：

.glyphicon {
  color: white;
}

<button class="nav-bar1"><span class="glyphicon glyphicon-cog"></span><p>Dashboard</p></button>

此外，我已经清除了浏览器的历史记录，但仍然无法正常运行，我使用的是Bootstrap-3.3.7。 click here在浏览器中查看我的html。

Answer 1

您还可以定位内容所在的::before组件，如下所示：

.glyphicon::before {
    color: white;
}

Answer 2

您可以在颜色后添加!important来覆盖它

添加：

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

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

<button class="nav-bar1"><span class="glyphicon white-icon glyphicon-cog"></span><p>Dashboard</p></button>

希望这会有所帮助

Answer 3

您可以将其直接添加到样式中：

<span class="glyphicon glyphicon-cog" style="color:blue!important"></span>

或者您可以将其作为类添加到图标中，然后在CSS中为其设置样式颜色

HTML

<span class="glyphicon glyphicon-cog blue"></span>

CSS

.blue {
    color: blue!important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button class="nav-bar1"><span style="color:blue!important" class="glyphicon glyphicon-cog"></span><p>Dashboard</p></button>

Answer 4

<button class="nav-bar1"><span class="glyphicon glyphicon-cog" style="color: white;"></span><p>Dashboard</p></button>

上面的示例使用内联样式。下面的示例是您喜欢的方式应添加到样式表中的内容。

.glyphicon glyphicon-cog{
    color:white;
}

Answer 5

.nav-bar1 .glyphicon{
   color:blue !important;
 }

应该这样做。

如何更改自举图标的图标颜色？

5 个答案: