按类获取字体真棒图标答案

【问题标题】：Get font awesome icon by class按类获取字体真棒图标
【发布时间】：2018-11-14 02:37:59
【问题描述】：

我在我的网站上使用了很棒的字体图标

<i class="fa fa-plus"></i>

我想从外部样式表设置它们的样式。我尝试使用

.fa {
  font-size: 64px;
}

和

.fa-plus {
  font-size: 64px;
}

但这些都没有任何效果。如果我使用内联

<i class="fa fa-plus" style="font-size: 64px;"></i>

或者如果我使用 ID 属性

<i class="fa fa-plus" id="plus"></i>

并用它设置样式

#plus {
  font-size: 64px;
}

效果很好，但我想避免添加不必要的 ID 属性或使用内联 CSS。我也可以使用改变图标的颜色

.fa {
  color: red;
}

无论我把它放在哪里，它都能很好地工作。我将我的 CSS 链接更改为在字体真棒导入之后，这没有任何区别。

编辑：

我有一个更进一步的选择器，其样式为 <i> 标记

【问题讨论】：

【解决方案1】：

尝试使用 !important，这不是最佳做法，但有时是最佳选择。例如。

属性：值！重要；

【讨论】：

【解决方案2】：

您可以考虑使用:not() 选择器，它允许您添加随机 ID 并拥有更具体的选择器。这是因为not()的特异性等于内部选择器的特异性：

.fa-plus:not(#randomId) {
  font-size: 64px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" >
<i class="fas fa-plus"></i>

【讨论】：