css - 如何添加:hover affects to fa-fa icons?

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

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

.fa:hover { 
    color: red
}

或者如果你想为每个图标指定它:

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