html - 按类获取 Font Awesome 图标

Question

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

<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;
}

无论我把它放在哪里，它都能正常工作。在 font awesome 导入之后，我将我的 CSS 链接更改为，这没有任何区别。

编辑:

我有一个选择器进一步设置了 <i> 的样式。标签

Answer 1

您可以考虑使用 :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>