32

すばらしいフォントを見つけたので、自分のウェブサイトで使用したいと思います。

問題は、フォントをグラデーションで色付けしたいということです。標準テキストで動作するこのコードを見つけましたが、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」が表示されました...

誰でも何か考えがありますか？

ありがとう

4

2 に答える 2

39

これを簡単に試してみてください。認識すべき重要なことは、Font Awesome が「before」疑似要素を介して実際のアイコンを追加することです。

[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";
}

グラデーション効果をアイコンに適用するには、アイコンを含む疑似要素をターゲットにする必要があります。コードに基づく実際のデモについては、この 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 */
}​

編集：「FontAwesome」アイコンを含むリンクされたCSSファイルが移動したため、上記のリンクされたjsFiddleは期待どおりに機能しなくなりました。Bootstrapcdn.com でホストされているバージョンの FontAwesome v4.0.3 と更新された FontAwesome-icon CSS クラス名を使用する作業バージョンは、 http://jsfiddle.net/HGxMu/55/で入手できます。

于 2012-10-05T23:19:06.620 に答える
38

スタイルをアイコンに直接適用します。

.fa-gradient {
	background: -webkit-gradient(linear, left top, left bottom, from(#f00), to(#333));
	-webkit-background-clip: text;
	-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>

于 2017-01-02T23:26:42.937 に答える