<a>何らかの理由でアイコンをタグで囲む必要があります。
フォント素晴らしいアイコンの色を黒に変更する方法はありますか？それとも、タグ
で包まれている限り不可能ですか？<a>Font awesomeは、画像ではなくフォントであるはずですよね？
<a href="/users/edit"><i class="icon-cog"></i> Edit profile</a>
質問する
631944 次
21 に答える
401
これは私のために働いた：
.icon-cog {
color: black;
}
4.7.0以降のFontAwesomeのバージョンの場合、次のようになります。
.fa-cog {
color: black;
}
于 2013-01-23T07:31:53.493 に答える
59
HTML：
<i class="icon-cog blackiconcolor">
css：
.blackiconcolor {color:black;}
ボタンアイコンにクラスを追加することもできます...
于 2013-12-01T19:27:04.193 に答える
56
style属性で色を指定できます。
<a href="/users/edit"><i class="icon-cog" style="color:black"></i> Edit profile</a>
于 2013-03-11T19:06:27.090 に答える
12
プロジェクト全体の素晴らしいアイコンの色を変更するには、cssでこれを使用します
.fa {
color : red;
}
于 2017-02-23T02:57:33.960 に答える
11
これを試して：
<i class="icon-cog text-red">
<i class="icon-cog text-blue">
<i class="icon-cog text-yellow">
于 2016-03-25T06:13:44.017 に答える
9
CSSファイルを変更したくない場合は、これが私に適しています。HTMLで、色付きのスタイルを追加します。
<i class="fa fa-cog" style="color:#fff;"></i>
于 2017-09-08T16:10:23.013 に答える
6
その種類のボタンの歯車アイコンのみを押すには、ボタンにクラスを与え、ボタンの内側にある場合にのみアイコンの色を設定できます。
HTML：
<a class="my-nice-button" href="/users/edit">
<i class="icon-cog"></i>
Edit profile
</a>
CSS：
.my-nice-button>i { color: black; }
これにより、ボタンの直系の子孫であるアイコンが黒くなります。
于 2013-09-06T15:37:33.583 に答える
6
フォント素晴らしいアイコンの色を黒に変更する方法はありますか？
はいあります。切り取られた以下を参照してください
<!-- Assuming that you don't have, this needs to be in your HTML file (usually the header) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Here is what you need to use -->
<a href="/users/edit" class="fa fa-cog" style="color:black"> Edit Profile</a>Font awesomeは、画像ではなくフォントであるはずですよね？
はい、フォントです。したがって、品質を損なうことなく、任意のサイズにスケーリングできます。
于 2020-08-09T08:11:12.113 に答える
4
@ClarkeyBoyの回答を参照すると、最新バージョンのFont-Awesomeアイコンを使用している場合、またはfaクラスを使用している場合は、以下のコードが正常に機能します
.fa.icon-white {
color: white;
}
そして、icon-white既存のクラスに追加します
于 2016-03-27T06:05:54.867 に答える
3
好きなようにテキストスタイルを指定してください：D HTML：
<a href="javascript:;" class="fa fa-trash" style="color:#d9534f;">
<span style="color:black;">Text Name</span>
</a>
于 2017-09-28T18:41:39.167 に答える
3
私にとっては、インラインcss+オーバーライドだけが機能しました
<i class="fas fa-ellipsis-v fa-2x" style="color:red !important"></i>
于 2020-03-29T17:08:17.557 に答える
2
.fa-search{
color:#fff;
}
あなたはそのコードをcssで書くと、それは色を白またはあなたが望む任意の色に変えるでしょう、あなたはそれを指定します
于 2015-07-15T01:13:21.190 に答える
2
ブートストラップクラスを使用して、FontAwesomeのアイコンの色を変更できます
使用する
text-color
例
text-white
于 2019-09-23T05:30:20.860 に答える
1
好きなスタイルを付けてください
style="color: white;font-size: 20px;"
于 2016-09-16T06:20:56.537 に答える
1
プロパティを使用して前景色を変更することにより、fontawesomeアイコンの色を変更できます。次に例を示します。css color
<i class="fa fa-cog" style="color:white">
これはsvgsもサポートします
<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>
于 2019-06-13T18:18:25.470 に答える
1
このコードを同じ行に記述します。これにより、アイコンの色が変わります。
<li class="fa fa-id-card-o" style="color:white" aria-hidden="true">
于 2019-09-14T20:03:44.187 に答える
0
特定のアイコンの色を変更したい場合は、次のようなものを使用できます。
.fa-stop {
color:red;
}
于 2019-09-05T12:06:32.730 に答える
0
次のように、 colorプロパティを使用してターゲット要素の色を変更します。
.icon-cog { // selector of your element
color: black;
}
または、最新バージョンのfont-awesomeでは、塗りつぶされたアイコンまたは塗りつぶされていないアイコンから選択できます
于 2020-08-09T08:25:43.620 に答える
0
フォントの素晴らしいアイコンの色を変更するのは少し難しいかもしれません。より簡単な方法は、フォント内に独自のクラス名を追加することです-次のような素晴らしい定義済みクラス：
。
そして、CSSでcustom_defined__class_nameをターゲットにして、色を好きなように変更します。
于 2020-12-21T10:43:01.460 に答える
0
vsコードなどでsvgファイルを開きます
行を変更します
あなたが望むどんな色へのパスfill="gray"！私の場合は灰色に変更します！
于 2021-06-02T04:04:43.433 に答える
-8
HTML：
<i class="icon-cog blackiconcolor">
css：
.blackiconcolor {color:black;}
クラスを使用すると、必要なタグに適用できる無料のバインディングプロパティが提供されます。
于 2013-01-23T07:44:55.907 に答える