如何添加：悬停效果到fa-fa图标？

Question

我无法找到如何将伪：悬停添加到“Font-awesome”图标（fa-fa图标）。

如果有人可以提供帮助，我将非常感激。

HTML：

<a href="#" class="overview"><i class="fa fa-user fa-2x" style="margin-top:10px;"></i></a><br />
<a href="#" class="tier"><i class="fa fa-level-up fa-2x" style="margin-top:10px;"></i></a>

CSS：

.overview, .tier {
    color: black;
}

a:hover {
    color: red;
}

Answer 1

您发布的代码有效，但它也会为包含的任何文本着色。如果您只想在悬停图标时应用颜色，请将其放在类fa上，就像使用a标签一样。

.fa:hover { 
    color: red
}

或者如果您想为每个图标指定它：

.fa-level-up:hover {
   color: blue;
}