フォントを使ったテキストグラデーション

Question

私はちょうどfont awesomeを発見しました。私は自分のウェブサイトで使いたいと思います。

問題は、フォントをグラデーションで塗りたいということです。

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

そして、それはとの「Hello World」を表示： 私は標準的なテキスト上で動作this codeを見つけましたが、私はそれがここ

素晴らしいフォントからアイコンを動作させることができない私がテストしたものですグラデーション、私が望むアイコン、そして何もしない...

誰もが知っている？

ありがとうございました

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が含まれているリンクされたCSSファイル夢のような "アイコンが動いた。 bootstrapcdn.com-hostedのFontAwesome v4.0.3バージョンと更新された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>