Jak zmienić kolor czcionki Niesamowite ułożone ikony przy aktywowaniu

Question

używam dwóch fontów Firma Awesome ikony:

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

Są one ułożone na siebie dać wygląd ikony koła.

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

Kiedy najedź Chcę krąg być wypełnione czarnym i fa-user-plus zmienić kolor na biały. Jak mogę to osiągnąć?

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

Answer 1

Aby osiągnąć pożądany efekt, dodać fa-circle ikonę do stosu, który jest przezroczysta na wyświetlaczu (opacity:0.0) i stały (opacity:1.0) na :hover.

Na przykład (także na 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 }