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

Question

我不知道如何将伪 :hover 添加到“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;
}