How to change color of Font Awesome stacked icons on hover

Question

I'm using two Font Awesome icons:

• fa-circle-thin
• fa-user-plus

They are stacked on top of one another to give a circle icon look.

<span class="fa-stack fa-sm">
 <i class="fa fa-circle-thin fa-stack-2x"></i>
 <i class="fa fa-user-plus fa-stack-1x "></i>
</span>

When I hover over I want the circle to be filled in black and the fa-user-plus to change to white. How can I achieve this?

See JSFiddle: http://jsfiddle.net/ReturnOfTheMac/Lwdaen75/

Answer 1

To achieve the desired effect, add a fa-circle icon to the stack that will be transparent on display (opacity:0.0) and solid (opacity:1.0) on :hover.

For example (also on JSFiddle: http://jsfiddle.net/2hxxuv52/5/):

HTML

<span class="fa-stack fa-sm">
  <i class="fa fa-circle fa-stack-2x "></i>
  <i class="fa fa-circle-thin fa-stack-2x"></i>
  <i class="fa fa-user-plus fa-stack-1x "></i>
</span>

CSS

.fa-stack        .fa { color: black; }
.fa-stack        .fa.fa-circle-thin { color: black; }
.fa-stack        .fa.fa-circle { opacity:0.0; color:black; }

.fa-stack:hover  .fa.fa-user-plus { color: white; }
.fa-stack:hover  .fa.fa-circle-thin { color: black; }
.fa-stack:hover  .fa.fa-circle { opacity:1.0 }