user3722834 user3722834 - 16 days ago 5
CSS Question

Changing the color of an icon from FontAwesome?

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

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.

Comments