Gradiente di testo con carattere impressionante

Question

Ho appena scoperto font awesome e voglio usarlo nel mio sito web.

Il problema è che voglio che il mio font sia colorato con una sfumatura. Ho trovato this code che funziona su testo standard, ma non riesco a farlo funzionare con l'icona da Font Impressionante

Ecco quello che ho provato:

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

Ed è visualizzato un "Ciao mondo" con un gradiente, l'icona che voglio e poi niente ...

Qualcuno ha qualche idea?

Grazie

Answer 1

Ha dato un colpo rapido; la cosa importante da capire è che di carattere impressionante aggiunge le icone reale attraverso il '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"; 
} 

Per applicare il gradiente effetto all'icona, si deve indirizzare lo pseudo-elemento, che contiene l'icona - vedi this jsFiddle per una dimostrazione di lavoro in base al vostro codice:

.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 */ 
}​ 

---

Edit: il jsFiddle legato soprattutto non funziona come previsto più perché il CSS-file collegato che contiene la "FontAw esome "-iconi si è mosso; una versione funzionante usando la versione bootstrapcdn.com-hosted di FontAwesome v4.0.3 e aggiornata FontAwesome-icon I nomi delle classi CSS sono disponibili al http://jsfiddle.net/HGxMu/55/

Answer 2

Applicare gli stili direttamente sull'icona.

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