glyphicon-颜色变化问题

Question

这是我第一次使用字形，但我知道它们是文本，并且可以像任何其他文本一样设置样式。 这就是我为什么我的字形图标没有改变颜色的原因。

我希望它将颜色从黑色（默认）更改为白色。这是我的代码：

HTML

<li><span class="glyphicon glyphicon-cog"></span><a class="lolo" href="Franchise-Details.php"><b>Admin Panel</b></a></li>

CSS

.glyphicon glyphicon-cog{
color:  #fff;
margin-right: 2px;
}

哪里出了问题？任何帮助将不胜感激

Answer 1

应该是

.glyphicon.glyphicon-cog{
    color:  #fff;
    margin-right: 2px;
}

您在.之前错过了glyphicon-cog，并且不需要两个班级之间的空格。

由于空格表明glyphicon类名为element，而glyphicon-cog命名元素位于此父级之下，情况并非如此。

由于您使用两个类定位相同的元素，因此语法应为

.classOne.classTwo

Answer 2

尽量不要覆盖字形的颜色。您可能需要在其他位置为同一个字形使用不同的颜色。而是创建一个CSS类，如：

.white
{ color: #fff; }

- 并将边距保留到“glyphicon”类，然后仅为数据（在content * unicode之前）保留“glyphicon-cog”类，因为这样可以节省文件大小，因为您不需要为每个文件大小定义边距单个字形，仅在字体类中：“glyphicon” - 如果需要。

然后只需在HTML中使用：

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