I want to change the color of two fa icons which is placed in the stack. But the color is not changed for outer icon.
HTML:
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-home fa-stack-1x fa-inverse"></i>
</span>
CSS:
.fa-home:hover{
color: yellow;
}
.fa-circle:hover{
color: white;
}
JSFiddle: http://jsfiddle.net/rajagopalx/k3c1c0bf/
home
icon is in front of it and covers it. This leads to thehover
state of thecircle
never being triggered and it not changing color therefore.