fontawesomeアイコンの色を塗ることは可能ですか？

Question

fontcolorは変更できますが、 "fill"は変更できません。最初に背景色を設定しようとしましたが、これはアイコンボックス全体の領域を塗りつぶします。例えば

、私は

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

を持っていますが、私はそれが黄色になりたいです。

編集： 「お気に入り」のアイコンを灰色の輪郭にしたい場合は、クリックすると輪郭がオレンジ色になり、黄色に塗りつぶします。

Answer 1

フォント-素晴らしいの両方が概説とiconsを満たしたの数が付属して使用します。 starは、のいずれかです。

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

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

あなたは人のガラス半フルタイプであれば、あなたも「アイコンつ星半分のエイリアスを使用することができます-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を使用したくない場合は、あまりにも大きさを設定する/置き換えることができます。

が、私は上記のコードとあなたがcan look at here JSFiddle、中にいくつかのより多くのオプションを入れている：

上記のコードは次のように出力します。

css-transitionsを使用すると、変更内容を即時に、またはjavascriptと組み合わせて使用​​する代わりに、CSSプロパティの変更をアニメートすることもできます。

Answer 2

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

あなたは黄色のように全体のスターを埋めるためにしたい場合は、代わりにアイコンつ星の空

のアイコンつ星を試してみてください、あなたはフォントにストローク（アウトライン）を追加するには、この

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

を試すことができます自体。私はあなたが探しているものを願っています。

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

color: yellow; 

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

そして、私の作品、ここfiddle

おかげです。

Answer 4

ここでは、フォントの色よりも別の「塗りつぶし」色（たとえば、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と指定できます。 More info here。