css - fontawesome アイコンの色を変更することはできますか?

Question

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

たとえば、私は

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

でも黄色にしたい。

編集：ユースケースは、「お気に入り」のアイコンを灰色の輪郭にし、クリックすると輪郭がオレンジ色になり、黄色に塗りつぶされることです。

Answer 1

設定するだけですcolor: yellow。アイコンはフォントであるため、同じ方法で他のフォント (テキスト) に設定した色になります。

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

あなたはこれを試すことができます

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

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

それを埋めるには、通常の

color: yellow;

Answer 2

フォントの色とは別の「塗りつぶし」の色をアイコンに使用する方法が必要だったように、ここに来た場合 (たとえば、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は、デフォルトが黒であると仮定して指定できます。詳細はこちら。

Answer 3

「-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;    
}

そして私のために働きます、ここにフィドルがあります

ありがとう。