如何将鼠标悬停更改为 angular 9 的 font-awesome 5 图标颜色？

Question

我正在使用 (https://github.com/FortAwesome/angular-fontawesome)，基本文档的一切看起来都不错：

<fa-icon [icon]="faCoffee"></fa-icon>

我的问题是我想要 'hover to change color'。当我执行以下操作时：

<fa-icon [icon]="faCoffee" [inverse]="true" class="colorchange"></fa-icon>

然后 CSS 表示：

.colorchange {
}

.colorchange:hover {
color:red !important;
}

CSS 似乎什么也没做。使简单的基本悬停颜色更改起作用的正确方法是什么？我尝试用 span 标签包装 fa-icon 元素并对其应用 class 但它也不起作用。

Answer 1

这是一个快速解决方法。通过他们的 source，可以看出他们使用了一个名为 ng-fa-icon 的选择器 class。因此，将 :hover 伪应用到此 class 应该有效。

.ng-fa-icon.hover-hightlight:hover {
  color: red;
}

<fa-icon class="hover-hightlight" [icon]="['fas', 'square']"></fa-icon>

工作示例：Stackblitz

How to mouseover change the color of a font-awesome 5 icon color with angular 9?