Change color when hover a font awesome icon

Question

Base in the Font Awesome documentation I create this icon    lt span class  fa-stack fa-5x  gt     lt i class  fa fa-circle fa-stack-2x  gt  lt  i gt     lt i class  fa fa-flag fa-stack-1x fa-inverse  gt  lt  i gt   lt  span gt    This code create this html    lt span class  fa-stack fa-5x  gt     lt i class  fa fa-circle fa-stack-2x  gt   before lt  i gt     lt i class  fa fa-flag fa-stack-1x fa-inverse  gt   before lt  i gt   lt  span gt    It is a stacked Flag icon  I want to change the icon color on Hover event  I tried with all these     fa-stack hover  color  red    fa-stack i hover  color  red    fa-stack i before hover  color  red     but not working

User · Accepted Answer

if you want to change only the colour of the flag on hover use this:

http://jsfiddle.net/uvamhedx/

_x000D_

.fa-flag:hover {_x000D_
    color: red;_x000D_
}

_x000D_

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>_x000D_
_x000D_
<i class="fa fa-flag fa-3x"></i>

_x000D_

User · Answer

use -  important - to override default black   x000D   x000D   fa-heart hover  x000D     color red  important  x000D    x000D   fa-heart-o hover  x000D     color red  important  x000D    x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com font-awesome 4 7 0 css font-awesome min css  gt  x000D   x000D   lt i class  fa fa-heart fa-2x  gt  lt  i gt  x000D   lt i class  fa fa-heart-o fa-2x  gt  lt  i gt  x000D   x000D   x000D

[font-awesome] Change color when hover a font awesome icon?

Examples related to font-awesome

Examples related to font-awesome-4