web-dev-qa-db-ja.com

Font Awesomeアイコンの色を変更できますか？

何らかの理由で、アイコンを<a>タグで囲む必要があります。
素晴らしいフォントのアイコンの色を黒に変更する方法はありますか？
または<a>タグで囲まれている限り不可能ですか？すごいフォントは画像ではなくフォントだと思いますね。

enter image description here

<a href="/users/edit"><i class="icon-cog"></i> Edit profile</a>
htmlcssfont-awesome
231
HUSTEN

これは私のために働いた：

.icon-cog {
  color: black;
}

Font Awesomeのバージョンが 4.7.0 の場合、これは次のようになります。

.fa-cog {
  color: black;
}
313
Evan Hahn

HTML：

    <i class="icon-cog blackiconcolor">

css：

    .blackiconcolor {color:black;}

ボタンアイコンにクラスを追加することもできます。

44
J.B.

スタイル属性で色を指定できます。

<a href="/users/edit"><i class="icon-cog" style="color:black"></i> Edit profile</a>
29
dandrews

プロジェクト全体のフォントの素晴らしいアイコンの色を変更するには、CSSでこれを使用します。

.fa {
  color : red;
}
8
ChAnDu353

CSSファイルを変更したくない場合は、これが私のために機能するものです。 HTMLでは、色付きのスタイルを追加します。

<i class="fa fa-cog" style="color:#fff;"></i>
6
Lazaros Papadopoulos

これを試して：

<i class="icon-cog text-red">
<i class="icon-cog text-blue">
<i class="icon-cog text-yellow">
6
Rahul Tathod

その種類のボタンの歯車アイコンだけを押すには、ボタンにクラスを指定し、ボタンの内側にあるときだけアイコンの色を設定できます。

HTML：

<a class="my-Nice-button" href="/users/edit">
    <i class="icon-cog"></i>
    Edit profile
</a>

CSS：

.my-Nice-button>i { color: black; }

これにより、ボタンの直接の子孫であるアイコンはすべて黒になります。

5
Adrian Schmidt

@ClarkeyBoyの回答を参照すると、最新バージョンのFont-Awesomeアイコンを使用している場合、またはfaクラスを使用している場合は、以下のコードが正常に機能します。

.fa.icon-white {
    color: white;
}

そして、既存のクラスにicon-whiteを追加します

3
Sategroup
.fa-search{
    color:#fff;
 }

そのコードをcssで書くと、色が白または好きな色に変わるので、それを指定します。

2
Ceejae

あなたが好きなものは何でもそれにスタイルを与えなさい

style="color: white;font-size: 20px;"
1
Rahul Tathod

テキストスタイルを好きなように指定するだけです。D HTML：

<a href="javascript:;" class="fa fa-trash" style="color:#d9534f;">
   <span style="color:black;">Text Name</span>
</a>
1
Qaan Lee Hoong

前景の色を変更するを使用してfontawesomeアイコンの色を変更できますcsscolor propertyを使用します。次に例を示します。

<i class="fa fa-cog" style="color:white">

これはsvgもサポートします

<style>
.fa-cog{
color:white;
}
</style>

<style>
.parent svg, .parent i{
color:white
}
</style>

<div class="parent">
  <i class="fa fa-cog" style="color:white">
</div>
0
Mohammed Shareef C