web-dev-qa-db-ja.com

フォントを素晴らしい色に着色することは可能ですか？

フォントの色は変更できますが、「塗りつぶし」は変更できません。最初に背景色を設定しようとしましたが、それはアイコンボックス領域全体を塗りつぶします。

たとえば、私は

<i class="icon-star-empty icon-large"></i>

でも黄色にしたいです。

編集：ユースケースは、「お気に入り」アイコンをグレーのアウトラインにしたいというものです。クリックすると、アウトラインがオレンジになり、黄色に塗りつぶされます。

cssfont-awesome
36
jqed

Font-awesomeには、アウトラインと塗りつぶしの両方の icons が付属しています。 スター はそれらの1つです。

使用できる4つの異なるスターアイコンクラスがあります。

class="icon-star"
class="icon-star-empty"
class="icon-star-half"
class="icon-star-half-empty"

あなたがグラスハーフフルタイプの人なら、「icon-star-half-empty」のエイリアスを使用することもできます：

class="icon-star-half-full"

フォントの素晴らしいアイコンに色を付けたり、さまざまな効果を使用して、探しているものを実現できます。

<i class="icon-star-empty icon-large icon-a"></i><br><br>
<i class="icon-star-empty icon-large icon-b"></i><br><br>
<i class="icon-star icon-large icon-c"></i> or <i class="icon-star icon-large icon-d"></i>

（インラインスタイルを使用するのではなく）次のCSSが使用される場合：

.icon-a {
    color: #888;
} 
.icon-b {
    color: orange;
}
.icon-c {
    color: yellow;
}
.icon-d {
    color: yellow;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: orange;
}

icon-largeを使用したくない場合は、サイズを置換/設定することもできます。

上記のコードは次を出力します。

enter image description here

しかし、上記のコードといくつかのオプションをJSFiddleに入れました。これらは こちらをご覧ください です。

css-transitions を使用することもできます。これは、変更を即座に、または javascript と組み合わせて有効にする代わりに、CSSプロパティへの変更をアニメーション化する方法を提供します。

72
nickhar

必要なのは、color: yellow。アイコンはフォントであるため、同じ方法で他のフォント（テキスト）に設定した色を使用します。

星全体を黄色で塗りつぶしたい場合は、icon-star-emptyではなくicon-starを試してください

これを試すことができます

-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: orange;

フォント自体にストローク（アウトライン）を追加します。それがあなたが探しているものであることを願っています。

そしてそれを埋めるために、通常を使用してください

color: yellow;
9
Lucas Lim

フォントの色とは別のアイコンの「塗りつぶし」色（たとえば、Facebookアイコンの「F」は透明で、背景が下にあるものは何でも表示する）が必要なようにここに来た場合は、あなたの答え：

<p class="fa-stack fa-lg">
    <i class="fa fa-square fa-stack-2x fa-2x fa-inverse"></i>
    <i class="fa fa-facebook-square fa-stack-2x fa-2x"></i>
</p>

通常の丸い正方形を取り、表示したいアイコンの下に積み重ねます。白にしたい場合は、デフォルトが黒であると仮定してfa-inverseを指定できます。 詳細はこちら 。

6
Brynn Bateman

「-webkit-text-stroke」の問題は、FFとIEで完全にサポートされていないことです。したがって、この場合、通常のスター内の擬似クラスでハーフスターを使用します。

.icon-star.red-border {
    position: relative;
    color: blue;
    font-size: 24px;
}

.icon-star.red-border:after {
    content: "\f006";
    color: red;
    position: absolute;
    left: 0;    
}

そして私のために働く、ここに fiddle

ありがとう。

6
Milo Mora

上記の答えに拡張して、フォント/アイコンにストローク/境界線を追加したい場合があります。その場合、以下が表示されます。

少なくともWebKitでは。例：

h1 {
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: black;
}

または略記：

h1 {
  -webkit-text-stroke: 1px black;
}

ストロークはWebKitでは機能しますが、他のブラウザーでは消えます！代替案？ text-shadowプロパティを使用して、ストロークをシミュレートできます。

h1 {
    text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}

4つの影を使用します。各黒は1pxのオフセットで、右上、左上、左下、右下にそれぞれ1つずつあります。

唯一のホールドアウトはIE9以下で、もちろん、これを使用してIE特定のCSSを説明できます。

追伸私自身の参考としても。

ソース： リンク

1
Bsienn

使用する場合、reactjsおよびコンポーネントの下

<i className="icon-star-empty icon-large" style={{color: "grey", fontSize: "70px"}}></i>
0
Prashanth Sams