Base in the Font Awesome documentation I create this icon:
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
This code create this html:
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x">::before</i>
<i class="fa fa-flag fa-stack-1x fa-inverse">::before</i>
</span>
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.
This question is related to
font-awesome
font-awesome-4
use - !important - to override default black
.fa-heart:hover{_x000D_
color:red !important;_x000D_
}_x000D_
.fa-heart-o:hover{_x000D_
color:red !important;_x000D_
}
_x000D_
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">_x000D_
_x000D_
<i class="fa fa-heart fa-2x"></i>_x000D_
<i class="fa fa-heart-o fa-2x"></i>
_x000D_
Source: Stackoverflow.com