Font awesome 悬停字体图标时更改颜色？

在字体中创建此图标：

<span class="fa-stack fa-5x">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>

---

但不工作。

如果只想更改悬停时的标志颜色，请使用以下选项：

.fa标志：悬停{
颜色：红色；
}

---

使用-！重要信息-覆盖默认黑色

.fa心脏：悬停{
颜色：红色！重要；
}
.fa-heart-o:悬停{
颜色：红色！重要；
}

应为红色；检查您的CSS语法是否有误，但问题仍然存在，是否使用字体5@Kiquenet你有codepen或JSF来处理你的问题吗？是

！重要信息

真的有必要吗？很多人认为它是编程中的反模式。使用重要并不是一个好的解决方案，因为它不能被覆盖。您可以使用我必须使用的Specificity覆盖所有非内联css！不幸的是，这很重要，但图标也在ag网格中，如果这意味着什么的话。对于Angular项目，我还必须将其放在styles.css文件中-它在component.css中不起作用

<span class="fa-stack fa-5x">
  <i class="fa fa-circle fa-stack-2x">::before</i>
  <i class="fa fa-flag fa-stack-1x fa-inverse">::before</i>
</span>

.fa-stack:hover{
color: red
}
.fa-stack i:hover{
color: red
}
.fa-stack i before:hover{
color: red
}