Changing icon color from FontAwesome?
The fontAwesome setting was messed up.
The reason the color
CSS attribute won't change the color of the shopping cart is because the shopping cart is rendered with 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;
}
( background
loads an image instead of an icon).
See http://fortawesome.github.io/Font-Awesome/get-started/
You may not have copied the other folders during the installation process.
If you uninstall background
, set other dir and keep your HTML, it should work.
EDIT: you were right, fontAwesome is installed correctly.
Now change the element <i>
:
<i class="fa fa-shopping-cart" title="View Cart"> </i>
You can set the size and position for a better display, but must be installed classes fa
and fa-shopping-cart
to display the shopping cart icon.
source to share
Your icon is not generated by css, it is a png image that is loaded as the background of the icon.
you can't just "change" its color, you need to adjust it using CSS Filters
in your case, you can apply the inverse to the element <i>
:
-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;
"> </i>
source to share
First remove !important
.icon-cart {
color: #4ca3c0;
}
.icon-cart a{
color: #4ca3c0;
}
now this is how you markup looks like
<a href="" title="View Cart">
<i class="icon icon-cart" title="View Cart"> </i>
<span></span>
</a>
.icon-cart
- i
and has no child.
So this is not correct:
.icon-cart a{
color: #4ca3c0;
}
source to share