Geek Answers Handbook

How to Change Font Color Amazing Folded Hover Icons

I use two Font Awesome icons:

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

They are stacked on top of each other to get a circle icon.

 <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'm in, I want the circle to be filled in black, and fa-user-plus for white. How can i achieve this?

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

+5
source share
1 answer

To achieve the desired effect, add the fa-circle icon on the stack, which will be transparent on the 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 }
+7
source

More articles:


All Articles