如何将鼠标悬停在 Angular 9 上更改字体真棒 5 图标颜色的颜色？答案

【问题标题】：How to mouseover change the color of a font-awesome 5 icon color with angular 9?如何将鼠标悬停在 Angular 9 上更改字体真棒 5 图标颜色的颜色？
【发布时间】：2020-06-26 22:52:17
【问题描述】：

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

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

我的问题是我想要“悬停改变颜色”。当我执行以下操作时：

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

然后让 CSS 显示：

.colorchange {
}

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

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

【问题讨论】：

stackoverflow.com/a/25772453/6635464 ：这能回答你的问题吗？

标签： angular font-awesome font-awesome-5

【解决方案1】：

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

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

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

工作示例：Stackblitz

【讨论】：