我可以更改Font Awesome的图标颜色吗?

<a>由于某种原因,我必须将图标包装在标签中。
有什么可能的方法可以将超棒字体图标的颜色更改为黑色?
还是只要包裹在<a>标签中就不可能吗?真棒字体应该是字体而不是图像,对不对?

在此处输入图片说明

<a href="/users/edit"><i class="icon-cog"></i> Edit profile</a>
伽罗理查德2020/04/03 11:57:33

您可以使用bootstrap类更改Font Awesome的图标颜色

text-color

text-white
番长樱梅2020/04/03 11:57:33

对我而言,唯一有效的方法是内联CSS +覆盖

<i class="fas fa-ellipsis-v fa-2x" style="color:red !important"></i>
神无2020/04/03 11:57:33

HTML:

<i class="icon-cog blackiconcolor">

css:

 .blackiconcolor {color:black;}

使用类将为您提供免费的绑定属性,您可以将其应用于所需的任何标签。

神无2020/04/03 11:57:33

如果要更改特定图标的颜色,可以使用如下所示的内容:

.fa-stop {
    color:red;
}
斯丁2020/04/03 11:57:33

在同一行中编写此代码,这将更改图标颜色:

<li class="fa fa-id-card-o" style="color:white" aria-hidden="true">
番长2020/04/03 11:57:33

您可以使用属性通过更改前字体图标的前景色更改其颜色以下是示例: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>

Tom凯2020/04/03 11:57:33

随便随便给它样式

style="color: white;font-size: 20px;"
神无2020/04/03 11:57:33
.fa-search{
    color:#fff;
 }

您在CSS中编写该代码,它将颜色更改为白色或您想要的任何颜色,请指定它

2020/04/03 11:57:33

只要给和文本样式就可以了:D HTML:

<a href="javascript:;" class="fa fa-trash" style="color:#d9534f;">
   <span style="color:black;">Text Name</span>
</a>
HarryJinJin2020/04/03 11:57:33

要仅击中此类按钮中的齿轮图标,可以给按钮一个类,并仅在按钮内部时设置图标的颜色。

HTML:

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

CSS:

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

这将使按钮的直接后代中的所有图标变为黑色。

小小2020/04/03 11:57:33

参考@ClarkeyBoy答案,如果使用最新版本的Font-Awesome图标或使用fa,则以下代码可以正常工作

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

并且,然后添加icon-white到现有的类

逆天小宇宙2020/04/03 11:57:32

尝试这个:

<i class="icon-cog text-red">
<i class="icon-cog text-blue">
<i class="icon-cog text-yellow">
神乐Davaid2020/04/03 11:57:32

这为我工作:

.icon-cog {
  color: black;
}

对于4.7.0以上的Font Awesome版本,其外观如下:

.fa-cog {
  color: black;
}
JinJin2020/04/03 11:57:32

HTML:

    <i class="icon-cog blackiconcolor">

css:

    .blackiconcolor {color:black;}

您还可以向按钮图标添加额外的类...

斯丁前端2020/04/03 11:57:32

如果您不想更改CSS文件,那么这对我有用。在HTML中,用颜色添加样式:

<i class="fa fa-cog" style="color:#fff;"></i>
小卤蛋2020/04/03 11:57:32

您可以在style属性中指定颜色:

<a href="/users/edit"><i class="icon-cog" style="color:black"></i> Edit profile</a>
卡卡西Near2020/04/03 11:57:32

要更改整个项目的字体真棒图标颜色,请在CSS中使用

.fa {
  color : red;
}