如何将活动类设置为从图标生成的web web字体图标

Question

我从图标中创建了一组图标，我可以像这样设置悬停样式

.icon-github:hover::before {
  color: #f1f1f1;
}

但是，当它是这样的活动类时，我尝试将它设置为特定的颜色。

.icon-home:before .active {
  color: #08FDD8 !important;
}

这一切都没有用，这就是HTML上的样子。

<li><a><span class="icon-twitter active"></span></a></li>

Answer 1

您的css正在寻找.active类作为.icon-home的子类。将:before psuedo选择器设为以下CSS：

.icon-home .active {
  color: #08FDD8 !important;
}

将以下列标记为目标：

<li><a><span class="icon-twitter">
    <span class="active"></span>
</span></a></li>

因为.active类正在修改.icon-home类，所以您希望将选择器链接到一起，如下所示：

.active.icon-home::before {
  color: #08FDD8 !important;
}

/* or */

.icon-home.active::before {
  color: #08FDD8 !important;
}