html - 如何使用 css 为 fa fa 和文本设置不同的颜色

Question

我想使用 css 为 fa-search 和带有此 html 的文本设置单独的颜色吗？

<a href="http://4309.co.uk/logos/"><div class="logos1"><i class="fa fa-search"><span class="padding">logos</span></i></a></div>

Answer 1

不确定我是否理解您的要求 - 您帖子的标题表明您希望图标和文本的颜色相同 - 但问题要求不同的颜色。

Fa 图标通过颜色 css 属性着色，因此您可以为它们设置给定的颜色。请注意，FA 图标被添加为::before 伪元素 - 因此可以直接设置样式或通过继承的颜色设置样式。

此外 - 尽管您可以在包含图标的 i 中包含内容 - 更常见的做法是将其视为单独的元素并关闭 <i>在跨度中添加其他内容之前。

编辑:作为对评论的回应——我更改了代码，使 a 具有 Logo 类——这样您就可以直接针对此元素而不是其他 a 元素。

a.logos1 {
 text-decoration: none;
 color: blue;
}

a .fa {
 color: red;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>

 <a href="http://4309.co.uk/logos/" class="logos1">
   <i class="fa fa-search"></i>
   <span class="padding">logos</span>
 </a>