<a>出于某种原因，我必须将我的图标包装在标签中。
有没有办法将字体真棒图标的颜色更改为黑色？
还是只要它包裹在<a>标签中就不可能？字体真棒应该是字体而不是图像，对吧？
<a href="/users/edit"><i class="icon-cog"></i> Edit profile</a>
问问题
631944 次
21 回答
401
这对我有用：
.icon-cog {
color: black;
}
对于4.7.0以上的 Font Awesome 版本，它看起来是这样的：
.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
您可以在样式属性中指定颜色：
<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>字体真棒应该是字体而不是图像，对吧？
是的，它是一种字体。因此，您可以将其缩放到任何大小而不会降低质量。
于 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
对我来说，唯一有效的是内联 css + 覆盖
<i class="fas fa-ellipsis-v fa-2x" style="color:red !important"></i>
于 2020-03-29T17:08:17.557 回答
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 回答
2
您可以使用引导类更改 Font Awesome 的图标颜色
利用
text-color
例子
text-white
于 2019-09-23T05:30:20.860 回答
2
.fa-search{
color:#fff;
}
你用css编写代码，它会将颜色更改为白色或你想要的任何颜色，你指定它
于 2015-07-15T01:13:21.190 回答
1
在同一行中编写此代码，这会更改图标颜色：
<li class="fa fa-id-card-o" style="color:white" aria-hidden="true">
于 2019-09-14T20:03:44.187 回答
1
您可以通过使用property更改其前景色来更改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
只要给它任何你想要的风格
style="color: white;font-size: 20px;"
于 2016-09-16T06:20:56.537 回答
0
使用color属性更改目标元素的颜色，如下所示：
.icon-cog { // selector of your element
color: black;
}
或者在最新版本的font-awesome中，您可以选择填充或不填充图标
于 2020-08-09T08:25:43.620 回答
0
如果要更改特定图标的颜色，可以使用以下内容：
.fa-stop {
color:red;
}
于 2019-09-05T12:06:32.730 回答
0
更改字体真棒图标的颜色可能有点棘手。更简单的方法是在 font-awesome 定义的类中添加你自己的类名，如下所示：
.
并在您的 CSS 中定位您的custom_defined__class_name以将颜色更改为您喜欢的任何颜色。
于 2020-12-21T10:43:01.460 回答
0
在vs code之类的打开svg文件
换行
path 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 回答