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


264

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

在此处输入图片说明

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


Answers:


346

这为我工作:

.icon-cog {
  color: black;
}

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

.fa-cog {
  color: black;
}

@Evans谢谢,但是问题是我有时将<i class =“ icon-cog icon-white”>放在黑色的表单元格上。您的CSS也被迫将其更改为黑色:(
HUSTEN 2013年

3
您可以添加以下内容:.icon-cog.icon-white {color:white; }
Evan Hahn

3
碰到了这一点-我发现在所有图标中添加一类“ fa”,然后按.fa {color: green;}一下就可以了。然后,您可以执行.fa.icon-white {color: white;}上述操作以达到相同的效果。
ClarkeyBoy'1

有可能改变background-color

@vamsikrishnamannem是的。您可以添加background-color: #112233到CSS。查看此代码作为示例。
埃文·哈恩

50

HTML:

    <i class="icon-cog blackiconcolor">

css:

    .blackiconcolor {color:black;}

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


1
这是一个很好的,整洁的解决方案。我更喜欢使用fa前缀(例如fa-black或fa-blue)命名类,只是为了清楚起见,我将它们应用于字体真棒图标。
DavidHyogo

35

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

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

16
-1首先,这是错误的,因为它还会根据要求更改文本的颜色,而不仅仅是图标的颜色。其次,不应推广使用内联css。
阿德里安·施密特

问题在哪里说“只是图标的颜色”而不是文本的颜色?
丹德鲁斯,2016年

3
我认为问题的表达方式显然暗示了这一点。似乎您会同意,因为您更新了答案:)
Adrian Schmidt

2
我想给一个小提示Bootstrap<i> 使用text-primary类标记,将 图标的颜色覆盖为蓝色。因此,意识到这一点很高兴。
elia

9

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

.fa {
  color : red;
}

很好,但是更改了我项目中的所有图标。我创建了.fa-black {color:#000;}之类的类。然后,我在想要其他颜色的图标上添加了fa-black类。
DavidHyogo,



5

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

HTML:

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

CSS:

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

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


3

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

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

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


2
.fa-search{
    color:#fff;
 }

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


2

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

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


1

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


1

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

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

0

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

.fa-stop {
    color:red;
}

0

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

text-color

text-white

0

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

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

-6

HTML:

<i class="icon-cog blackiconcolor">

css:

 .blackiconcolor {color:black;}

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


4
-1 Font真棒图标是文本,因此是名称。应该像使用其他任何文本一样使用css为它们着色,而不是使用供应商特定的技巧。另外,由于它们是文本,因此它们已经是黑白(或单色)的了。
阿德里安·施密特

2
@AdrianSchmidt上面所说的答案是将图像转换为黑色,我不是要更改字体颜色,我希望您能理解我..
ameya rote

2
我明白。答案仍然是关于问题的。字体真棒图标不是图像,而是文本。
Adrian Schmidt
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.