如何从FontAwesome更改图标的颜色？

Question

我正在使用BigCommerce，并且我的代码如下：

.icon-cart {
    color: #4ca3c0 !important;
}

.icon-cart a{
    color: #4ca3c0 !important;
}

并且它不会改变图标的颜色。需要帮助吗？ http://glymed-plus.mybigcommerce.com/

- user3722834

Answer 1

字体图标(fontAwesome)的安装出了问题。

购物车的颜色不会改变的原因是因为购物车是由雪碧图(sprite)渲染出来的。

.icon {
    display: inline-block;
    width: 16px;
    height: 14px;
    background: url("http://cdn3.bigcommerce.com/r-13587bfb690318eb6b3c052034841f2aff994eb4/themes/ClassicNext/images/icon_sprite.png") no-repeat 0 -27px;
}

背景正在加载一张图片而不是图标。

请参见http://fortawesome.github.io/Font-Awesome/get-started/

您可能没有复制安装中的其他文件夹。

如果您删除background，安装其他目录并保留您的HTML，则应该可以正常工作。

---

编辑：你是正确的，fontAwesome已经被正确安装。

现在改变 <i> 元素：

<i class="fa fa-shopping-cart" title="View Cart">&nbsp;</i>

您可以设置图标的大小和位置以获得更好的显示效果，但必须设置 fa 和 fa-shopping-cart 类才能显示购物车图标。

- Niloct

---

嘿！我没想到它还在拉取图像（BigCommerce很难处理）。但现在图标根本没显示出来。 - user3722834

图标没有显示，因为您的fontAwesome安装可能已经损坏。请参见答案中的链接。您需要复制字体目录。 - Niloct

在搜索框下方显示了一个fontAwesome图标。 - user3722834

Answer 2

你的图标不是用CSS制作的，而是作为图标背景加载的png图像。

你不能只是“更改”它的颜色，你需要使用 CSS滤镜进行调整。

在你的情况下，你可以在<i>元素上应用反转：

-webkit-filter: invert(100%);

将其从灰色改为白色。

body {
  background: black;
}
.icon {
  display: inline-block;
  width: 16px;
  height: 14px;
  background: url("http://cdn3.bigcommerce.com/r-13587bfb690318eb6b3c052034841f2aff994eb4/themes/ClassicNext/images/icon_sprite.png") no-repeat 0 -27px;
  -webkit-filter: invert(100%);
}
.icon:hover {
  -webkit-filter: invert(0%);
}

<i class="icon icon-cart" title="View Cart" style="
    color: red;
">&nbsp;</i>

- Banana

Answer 3

先移除 !important

.icon-cart {
    color: #4ca3c0;
}

.icon-cart a{
    color: #4ca3c0;
}

现在这是你的标记语言长什么样子

<a href="" title="View Cart">
    <i class="icon icon-cart" title="View Cart">&nbsp;</i>
    <span></span>
</a>

.icon-cart 是 i，且没有子元素。

因此这是无效的：

.icon-cart a{
    color: #4ca3c0;
}

- Gildas.Tambo