Question

从代码新手中了解Stack Overflow首次问题的答案。

我想使用自定义css编辑器在我的wordpress主题（arcade pro）的主页上更改我的字体真棒图标的颜色 - 你能建议使用css吗？

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

＆＃13;

<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>

＆＃13;

Answer 1

使用color属性。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您应该只需使用颜色更改文字：＃AA0000 。要选择font-awesome的所有图标，请使用此图标（假设图标位于 i 标记

中

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

上面的选择器选择标签的所有实例，其中的类以 fa - 开头，允许您一次选择所有字体真棒图标。

如果您的图标不在 i 标记内，只需找到匹配的标记并替换选择器。

Answer 3

要将所有图标更改为一种颜色，您可以执行以下操作：

i.fa {
    color:#cccccc;
}

但是，您的问题似乎只是在主页上更改。大多数Wordpress主题都会在元素或其中一个包装上添加一个独特的类。如果您想明确定位您的主页，请搜索该类并将其添加到上面的css中，如下所示：

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

如果您发布指向您网站的链接，我可以给您100％的完整答案。

编辑 - 只是注意到这是你的首发问题 - 这是我的第二个回答：P。

Answer 4

感谢您的帮助。一个简单的修正看似但却一直没有。实际发生的是，这里的一些建议部分有效（在某种意义上，你使用颜色属性进行了标记，我看到他们确实在其他地方更改了图标。

然后那个尤里卡时刻。主页小部件区域（我想要更改的图标被封装）感觉就像问题所以这在我想要的所有图标中都能很好地工作：

.bavotasan_custom_text_widget i.info { 颜色：＃bed730; border-color：＃bed730

Answer 5

在这里查看：Font Awesome CSS。

CSS：

JStrings

HTML：

 .fa-fish {
      color: salmon;
 }

什么是自定义css来改变字体真棒图标的颜色？

5 个答案: