कैसे मैं दो फ़ॉन्ट बहुत बढ़िया प्रतीक का उपयोग कर रहा मंडराना

Question

पर फ़ॉन्ट बहुत बढ़िया खड़ी माउस का रंग बदलने के:

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

वे एक दूसरे को देने के लिए की चोटी पर खड़ी दिखती हैं एक सर्कल आइकन देखो।

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

जब मैं मैं पर होवर चाहते चक्र काले में भरे जाने वाले और fa-user-plus सफेद करने के लिए बदलने के लिए। इसे कैसे प्राप्त किया जा सकता है?

JSFiddle देखें: http://jsfiddle.net/ReturnOfTheMac/Lwdaen75/

Answer 1

वांछित प्रभाव को प्राप्त करने के लिए, ढेर कि :hover पर प्रदर्शन (opacity:0.0) और ठोस (opacity:1.0) पर पारदर्शी होगा करने के लिए एक fa-circle आइकन जोड़ें।

उदाहरण के लिए (भी JSFiddle पर: http://jsfiddle.net/2hxxuv52/5/):

एचटीएमएल

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

सीएसएस

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