Changing the color of an icon from FontAwesome?

Question

I am using BigCommerce, and have this for my code:

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

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

and it won't change the color of the icon. Any help?

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

Answer 1

The fontAwesome installation is messed up.

The reason color CSS attribute won't change the color of the shopping cart is because the shopping cart is being rendered by a 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;
}

(the background is loading an image, instead of the icon).

See http://fortawesome.github.io/Font-Awesome/get-started/

You might not have copied the other folders in the installation.

If you remove the background, install the other dirs, and keep your HTML, it should work.

---

EDIT: You were right, fontAwesome is correctly installed.

Now change the <i> element:

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

You can set the size and position to better the display, but the fa and fa-shopping-cart classes must be set for showing the shopping cart icon.

Answer 2

Your icon is not css made, it is a png image that is loaded as the icon's background.

you cannot just 'change' its color, you need to adjust it using CSS Filters

in your case, you can apply invert on the <i> element:

-webkit-filter: invert(100%);

to change it from gray to white.

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>