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

问题描述

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

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

最佳解决方案

这对我有用：

.icon-cog {
  color: black;
}

对于较新版本的 Font Awesome，它可能如下所示：

.fa-cog {
  color: black;
}

次佳解决方案

HTML：

    <i class="icon-cog blackiconcolor">

css：

    .blackiconcolor {color:black;}

您还可以添加额外的类到按钮图标…

第三种解决方案

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

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

第四种方案

要按这种按钮中的 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; }

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

参考文献

• Can I change the color of Font Awesome’s icon color?

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。