फ़ॉन्ट ग्रेडिएंट के साथ टेक्स्ट ग्रेडिएंट

Question

मैंने अभी font awesome खोजा है और मैं इसे अपनी वेबसाइट में उपयोग करना चाहता हूं।

समस्या यह है कि, मैं चाहता हूं कि मेरा फ़ॉन्ट ढाल के साथ रंगीन हो। मैं this code, जो मानक टेक्स्ट पर काम करता है पाया, लेकिन मैं इसे बहुत बढ़िया

यहाँ फ़ॉन्ट से एक आइकन के साथ काम नहीं कर सकते हैं कि मैं क्या परीक्षण किया है:

<style> 
    .big-icon { 
     font-size: 72px; 
     background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#333)); 
     -webkit-background-clip: text; 
     -webkit-text-fill-color: transparent; 
    } 
</style> 

<span class="big-icon"> 
    Hello world 
</span> 
<i class="icon-beaker"></i> 
<span class="big-icon"> 
    <i class="icon-beaker"></i> 
</span> 

और इसके साथ एक "हैलो दुनिया" प्रदर्शित एक ढाल, आइकन जो मैं चाहता हूं और फिर कुछ नहीं ...

किसी को भी कोई विचार है?

धन्यवाद

Answer 1

यह एक त्वरित शॉट दिया गया; महत्वपूर्ण बात यह है एहसास है कि फ़ॉन्ट बहुत बढ़िया 'before' pseudo-element के माध्यम से वास्तविक प्रतीक कहते है:

[class^="icon-"]::before, 
[class*=" icon-"]::before { 
    font-family: FontAwesome; 
    font-weight: normal; 
    font-style: normal; 
    display: inline-block; 
    text-decoration: inherit; 
} 

.icon-beaker:before { 
    content: "\f0c3"; 
} 

आइकन के ढाल प्रभाव लागू करने के लिए आप छद्म तत्व है जो एक आइकन होता है लक्षित करने के लिए है - के लिए this jsFiddle देखना एक काम कर प्रदर्शन अपने कोड पर आधारित:

.big-icon:before { 
    font-size: 72px; 
    background: -webkit-gradient(linear, left top, left bottom, from(#f00), to(#333)); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    display: initial; /* reset Font Awesome's display:inline-block */ 
}​ 

---

संपादित करें: jsFiddle ऊपर लिंक काम नहीं करता है के रूप में अब और उम्मीद से लिंक सीएसएस फ़ाइल है कि "FontAw शामिल एसोम "-कॉन चले गए हैं; FontAwesome v4.0.3 के bootstrapcdn.com-hosted संस्करण का उपयोग कर एक वर्किंग वर्जन और अपडेट किया गया FontAwesome-icon CSS क्लास नाम http://jsfiddle.net/HGxMu/55/

Answer 2

सीधे आइकन पर शैलियों को लागू करें।

.fa-gradient { 
 
\t background: -webkit-gradient(linear, left top, left bottom, from(#f00), to(#333)); 
 
\t -webkit-background-clip: text; 
 
\t -webkit-text-fill-color: transparent; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<i class="fa fa-3x fa-wrench fa-gradient"></i>