user3722834 user3722834 - 1 year ago 56
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?

Answer Source

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("") no-repeat 0 -27px;

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


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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download