FA5: Icon hover class

[TheColorRed]

I am not sure if this is built in or not, but I can't seem to find a way to do this.

It would be nice if each icon had a hover class that would take effect when hovered upon.

Maybe something like this:

<i class="fal fa-times-circle fas-times-circle-hover"></i>

[Joyrex]

You could write a CSS class for :hover that would change the SVG's color - you can see this in effect on the icon detail page (although they are wrapping a <span> around the FA icon):

.hover-orange:focus, .hover-orange:hover {
	color: #fd7e14;
}

[TheColorRed]

That works for color, but what about completely changing the icon to something else on hover?

[wolfy1339]

You would need to add CSS that refers to the icon you want's unicode codepoint

[tagliala]

Are you using the webfont or the javascript framework?

[TheColorRed]

I am using the JavaScript framework

[PeterShaggyNoble]

See https://fontawesome.com/how-to-use/svg-with-js#pseudo-elements for the solution to this.

[kiquenet]

Solution full sample code for changing the icon to something else on hover?