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

Question

I am using (https://github.com/FortAwesome/angular-fontawesome) and everything looks good with what the basic documentation has:

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

My issue is I want to have a 'hover to change color'. When I do the following:

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

Then have CSS that says:

.colorchange {
}

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

The CSS appears to do nothing. What is the right way to get a simple basic hover color change to work? I tried wrapping the fa-icon element with a span tag and applied a class to that and it didn't work either.

https://stackoverflow.com/a/25772453/6635464 : Does this answer you question? — ngShravil.py, Mar 15 '20 at 17:56

score 2 · Accepted Answer · answered Mar 15 '20 at 18:14

Here is a quick workaround. Going through their source, it can be seen they use a selector class called ng-fa-icon. So applying :hover pseudo to this class should work.

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

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

Working example: Stackblitz

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

1 Answers1