Get font awesome icon by class

Question

I am using font awesome icons on my website as such

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

and I want to style them from an external style sheet. I tried using

.fa {
  font-size: 64px;
}

and

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

but neither of those had any effect. If I use inline

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

or if I use an ID attribute

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

and style it with

#plus {
  font-size: 64px;
}

that works fine, but I would like to avoid adding unnecessary ID attributes or using inline CSS. I can also change the color of the icon by using

.fa {
  color: red;
}

And that works perfectly fine no matter where I put it. I changed my CSS link to after the font awesome import and that made no difference.

Edit:

I had a selector further up that styled the <i> tag

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

property：value！important;