Come cambiare il colore dei caratteri impressionanti icone impilati su hover

Question

sto usando due caratteri impressionanti icone:

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

Essi sono impilati uno sopra l'altro per dare un'icona a forma di cerchio.

<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> 

Quando mi passa il mouse sopra voglio il cerchio da compilare in nero e il fa-user-plus per cambiare al bianco. Come posso raggiungere questo obiettivo?

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

Answer 1

Per ottenere l'effetto desiderato, aggiungere fa-circle icona a stack che sarà trasparente sul display (opacity:0.0) e solida (opacity:1.0) su :hover.

Per esempio (anche su 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 }