Gradient tekstu z czcionką niesamowitą

Question

Właśnie odkryłem font awesome i chcę go użyć na mojej stronie internetowej.

Problem polega na tym, że chcę, aby moja czcionka była kolorowa z gradientem. znalazłem this code który działa na standardowym tekstem, ale nie sprawiają, że praca z ikoną z Font Niesamowite

Oto co mam przetestowane:

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

I to wyświetlane jest „Hello World” z gradient, ikona, której chcę, a potem nic ...

Ktoś ma jakiś pomysł?

Dzięki

Answer 1

Zrobiłem to szybkie zdjęcie; Ważne jest, aby zdać sobie sprawę, że czcionki Niesamowite dodaje rzeczywiste ikony poprzez '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"; 
} 

Aby zastosować gradientu efekt na ikonę, trzeba kierować się pseudo-element, który zawiera ikonę - patrz this jsFiddle dla pokaz pracy opiera się na kodzie:

.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: jsFiddle połączone powyżej nie działa zgodnie z oczekiwaniami, ponieważ już połączony plik CSS, który zawiera „FontAw esome "- ruchy się wzruszyły; Wersja robocza korzystająca z wersji FontAwesome v4.0.3 w wersji bootstrapcdn.com-hosted i zaktualizowanych nazw klas CSS fontAwesome jest dostępna pod adresem http://jsfiddle.net/HGxMu/55/

Answer 2

Zastosuj style bezpośrednio na ikonie.

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