2

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/

1
  • It does indeed change the colour but the home icon is in front of it and covers it. This leads to the hover state of the circle never being triggered and it not changing color therefore.
    – k-nut
    Commented Jul 13, 2015 at 13:10

3 Answers 3

12

Set the hover on the surrounding element:

.fa-stack:hover .fa-home {
    color: yellow;
}   
.fa-stack:hover .fa-circle {
    color: white;
}

http://jsfiddle.net/bnh84trn/

1
  • I didn't see your answer 'til after writing mine up... +1 :)
    – NateW
    Commented Jul 13, 2015 at 13:13
3

If you change the way your css is written and target the fa-stack on hover it works great.

CSS:

.fa-stack:hover .fa-home {
  color: yellow;
}
.fa-stack:hover .fa-circle
{
  color: white;
}

Working example: http://jsfiddle.net/p2yLcsw0/2/

1

You can use hover on the wrapping element. The .fa-circle is not technically hovered, because it is hidden by the home.

This will work with any generic icon, not just home:

.fa-stack:hover .fa {
    color: yellow;
}
.fa-stack:hover .fa-circle{
    color: white;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.