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 · 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

User · Answer

if you want to change only the colour of the flag on hover use this   http   jsfiddle net uvamhedx   x000D   x000D   fa-flag hover   x000D      color  red  x000D    x000D   lt link href  https   maxcdn bootstrapcdn com font-awesome 4 7 0 css font-awesome min css  rel  stylesheet   gt  x000D   x000D   lt i class  fa fa-flag fa-3x  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