CODEWITHSUNDEEP
htmlcssbigcommerce
user3722834
user3722834

Reputation: 35

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/

Upvotes: 3

Views: 2253

Answers (3)

Gildas.Tambo
Gildas.Tambo

Reputation: 22663

First Remove !important

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

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

now here is how you markup looks like

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

.icon-cart is i and has no child.

So this is not valid:

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

Upvotes: 0

Niloct
Niloct

Reputation: 10015

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.

Upvotes: 1

Banana
Banana

Reputation: 7484

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>

Upvotes: 1

Related Questions