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

Question

由于某种原因，我必须将我的图标包装在<a>标记内 有没有办法将字体 - 真棒图标的颜色改为黑色？
或者只要它包裹在<a>标签内，它是不可能的？字体真棒应该是字体而不是图像，对吧？

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

Answer 1

这对我有用：

.icon-cog {
  color: black;
}

对于 4.7.0 以上的Font Awesome版本，它看起来像这样：

.fa-cog {
  color: black;
}

Answer 2

HTML：

    <i class="icon-cog blackiconcolor">

css：

    .blackiconcolor {color:black;}

您还可以在按钮图标中添加额外的课程......

Answer 3

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

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

Answer 4

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

.fa {
  color : red;
}

Answer 5

试试这个：

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

Answer 6

如果您不想更改CSS文件，这对我有用。在HTML中，使用颜色添加样式：

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

Answer 7

要仅触摸该按钮中的cog-icons，您可以为按钮指定一个类，并仅在按钮内部设置图标的颜色。

HTML：

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

CSS：

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

这会使您按钮的直接后代的任何图标变黑。

Answer 8

参考@ClarkeyBoy回答，如果使用最新版本的Font-Awesome图标或使用fa类

，下面的代码可以正常工作

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

然后，将icon-white添加到现有类

Answer 9

.fa-search{
    color:#fff;
 }

您在css中编写该代码，它会将颜色更改为白色或您想要的任何颜色，您可以指定它

Answer 10

是否有任何可能的方法可以将超棒字体图标的颜色更改为 黑色？

是的，有。看到撕开的波纹管

numpy

真棒字体应该不是字体，对吧？

是的，它是一种字体。因此，您可以将其缩放到任意大小而不会损失质量。

Answer 11

只要给你想要的文字样式：D HTML：

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

Answer 12

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

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

Answer 13

将此代码写在同一行中，这会更改图标颜色：

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

Answer 14

只要给它任何你喜欢的风格

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

Answer 15

使用 color 属性更改目标元素的颜色，如下所示：

.icon-cog { // selector of your element
    color: black;
}

或者在最新版本的 font-awesome 中，您可以选择填充或未填充图标

Answer 16

改变字体很棒的图标的颜色可能有点棘手。更简单的方法是在 font-awesome 定义的类中添加您自己的类名，如下所示：

.

并在 CSS 中定位您的 custom_defined__class_name 以将颜色更改为您喜欢的任何颜色。

Answer 17

用vs code什么的打开svg文件

换行

path fill="gray" 到你想要的任何颜色！就我而言，我将其更改为灰色！

Answer 18

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

使用

text-color

示例

text-white

Answer 19

如果您想更改特定图标的颜色，则可以使用以下方式：

.fa-stop {
    color:red;
}

Answer 20

您可以使用 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>

---

Answer 21

HTML：

<i class="icon-cog blackiconcolor">

css：

 .blackiconcolor {color:black;}

使用class将为您提供一个免费的绑定属性，您可以将其应用于您需要的任何标记。