更改超棒字体图标颜色的自定义 css 是什么？

Question

感谢您对代码新手在 Stack Overflow 上的首次提问的回答。

我想使用自定义 css 编辑器更改我的 wordpress 主题 (arcade pro) 主页上超赞字体图标的颜色 - 你能推荐 css 试试吗？

*每个图标（如下例中的奖杯）都在主题开发人员创建的自定义文本小部件中。他已经设置了预设颜色，我只想使用我自己的十六进制代码。谢谢

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<a href="http://webaddress.com/?s=yorkshire+county+cricket+club">
  <i class="info fa fa-trophy"></i>
</a>

Answer 1

您应该可以只更改 颜色的文本：#AA0000。要 select font-awesome 的所有图标，使用这个（假设图标在 i 标签

i[class*="fa-"] {
    color: #AA0000;
}

以上 select 或 select 以 fa- 开头的带有类的标签的所有实例允许您 select 一次所有超棒的字体图标。

如果您的图标不在 i 标签内，只需找到匹配的标签并替换 selector.

Answer 2

使用 color 属性.

a .fa-trophy {  /* Use '.fa' if you want to select all icons at once*/
  color: #deb887
}

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<a href="http://webaddress.com/?s=yorkshire+county+cricket+club">
  <i class="info fa fa-trophy fa-5x"></i>
</a>

Answer 3

要将所有图标更改为一种颜色，您可以这样做：

i.fa {
    color:#cccccc;
}

但是，您的问题似乎是询问如何更改它们仅在您的主页。大多数 Wordpress 主题会附加一个额外的唯一 class 到元素或其中一个 wrapping 。如果您想明确定位您的主页，请搜索 class 并将其添加到上面的 css 之前，如下所示：

.your-homepage-class i.fa {
    color:#cccccc
}

如果您 post 到您的站点 link 我可以给您一个 100% 完整的答案。

编辑——刚注意到这是你的第一个问题——这是我的第二个答案:P.

Answer 4

感谢您的帮助。一个看似足够简单的修改，但绝非如此。实际发生的是这里的一些建议部分起作用（在某种意义上，你使用颜色属性进行标记，我看到他们确实在其他地方改变了图标。

然后就是灵光一现的时刻。主页小部件区域（我想更改的图标被包裹在那里）感觉像是问题所在，所以这在我想要的所有图标上都能完美运行：

.bavotasan_custom_text_widget i.info { 颜色：#bed730；边框颜色：#bed730

Answer 5

看这里：Font Awesome CSS。

CSS:

 .fa-fish {
      color: salmon;
 }

HTML:

<link href="/your-path-to-fontawesome/css/fontawesome.css" 
rel="stylesheet">
<link href="/your-path-to-fontawesome/css/brands.css" rel="stylesheet"> 
<link href="/your-path-to-fontawesome/css/solid.css" rel="stylesheet">
<i class="fas fa-fish"></i>

更改超棒字体图标颜色的自定义 css 是什么？

What's the custom css to change the colour of a font awesome icon?

html

css

wordpress

font-awesome