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

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

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

これは私のために働きました：

.icon-cog {
  color: black;
}

4.7.0以上のFont Awesomeのバージョンでは、次のようになります。

.fa-cog {
  color: black;
}

HTML：

    <i class="icon-cog blackiconcolor">

css：

    .blackiconcolor {color:black;}

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

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

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

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

.fa {
  color : red;
}

これを試して：

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

CSSファイルを変更したくない場合は、これでうまくいきます。HTMLで、色付きのスタイルを追加します。

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

その種類のボタンの歯車アイコンのみをヒットするには、ボタンにクラスを指定し、ボタンの内部にある場合にのみアイコンの色を設定できます。

HTML：

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

CSS：

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

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

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

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

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

.fa-search{
    color:#fff;
 }

あなたはCSSでそのコードを書いて、それは色を白またはあなたが望む任意の色に変えるでしょう、あなたはそれを指定します

好きなようにテキストスタイルを付けてください：D HTML：

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

好きなスタイルを与えてください

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

プロパティを使用して前景色を変更することにより、fontawesomeアイコンの色を変更できcss colorます。次に例を示します。

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

このコードを同じ行に記述します。これにより、アイコンの色が変更されます。

<li class="fa fa-id-card-o" style="color:white" aria-hidden="true">

特定のアイコンの色を変更したい場合は、次のようなものを使用できます。

.fa-stop {
    color:red;
}

Font Awesomeのアイコンの色は、ブートストラップクラスで変更できます。

使用する

text-color

例

text-white

私にとっては、動作したのはインラインcss +オーバーライドだけです

<i class="fas fa-ellipsis-v fa-2x" style="color:red !important"></i>

HTML：

<i class="icon-cog blackiconcolor">

css：

 .blackiconcolor {color:black;}

クラスを使用すると、必要なタグに適用できる無料のバインディングプロパティが提供されます。