Question

我正在使用BigCommerce，并将其用于我的代码：

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

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

并且它不会改变图标的颜色。有什么帮助吗？

http://glymed-plus.mybigcommerce.com/

Answer 1

fontAwesome安装搞砸了。

color CSS属性不会改变购物车颜色的原因是购物车是由精灵呈现的：

.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;
}

（background正在加载图片，而不是图标）。

请参阅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类才能显示购物车图标。

Answer 2

您的图标不是css制作的，它是作为图标背景加载的png图像。

你不能只是'改变'它的颜色，你需要使用CSS Filters

进行调整

在您的情况下，您可以在<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>

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

从FontAwesome更改图标的颜色？

3 个答案: