I'm using two Font Awesome icons:
fa-circle-thinfa-user-plusThey 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/
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 }
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments