Shopping cart and wishlist icon sets

Hi
I d like to change the icon of shopping cart icon (on top right hand corner) and wishlist icon with font awesome icons or some other icon sets. Also I d like to change their colors and hover colors. How can I do that? Thanx

Hi,

You can switch to Font Awesome set for that buttons in Theme Settings -> Header -> Appearance. As for the color, provide us your website link and we will prepare a custom CSS to change it.

Regards

Thanx

Here is a code to change the color of the shopping cart icon on hover

div.shopping-cart>a:hover {
    color: #ff00ff;
}

Regards

Hi there I changed the hover color but I cant change the color of idle icon
I want to make the icon color blue, and hover red

You can change the icon color with this code

.right-column>div a, .right-column>div ul li a {
    color: #ff0000;
}

Firstly thanx for your quick responses maybe I should’ve told you what all I want before, but I thought this was simple css content thing so I only asked you the color thing. But it seems a bit interesting.
Please see the jpg and link
1-What I m trying to achieve is this, as you can see on the attached jpg. Idle ones with FontAwesome’s not filled icons, and hover ones with inside filled icons (for shopping cart I couldnt find not filled icon so for idle I ve chosen a cart, for hover I ve chosen another cart but with plus sign in it). So for wishlist icons mouse over works with css content thingy, no problem. But when it comes to shopping cart, it doesnt work. it only changes the color but not content. On Custom css my css code at the moment as this: PLEASE HELP THANX:

.wishlist-info-widget>a{color:#ff0000;content:”\f08a”;font-family:FontAwesome;}
.wishlist-info-widget>a:hover{color:#ff8000;content:”\f004″;font-family:FontAwesome;}
.wishlist-info-widget>a span{font-weight:600;}

.shopping-cart .subtotal-divider{color:#0099ff;content:’=’;font-size:145%;}

.right-column>div a, .right-column>div ul li a{color:#ff0000;content:”\f07a”;font-family:FontAwesome;}
.shopping-cart>a:hover{color:#008000;content:”\f217″;font-family:FontAwesome;}

Attachments:

You must be logged in to view attached files.

Hi,

With this code you can change shopping cart icon type on hover

.shopping-cart:hover>a:before{content:"\f004"!important;}

THANK YOU VERY MUCH it worked perfectly. One last thing please see the jpg

Attachments:

You must be logged in to view attached files.

Here you have the code. Sorry but we can’t change / divider with a CSS

.basel-cart-number {
	font-size:16px;
	font-weight:bold;
}
div.right-column .wishlist-info-widget>a>span {
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    top: -2px;
    left: 20px;
}

Regards

Thank you for your kind and quick response
this is really last one:
As you see on my link I did and works nicely but icons needs to be larger.
How can I make wishlist and cart icons larger? thnx

Try this

.shopping-cart>a:before,
.right-column .wishlist-info-widget>a:after, 
.right-column .wishlist-info-widget>a:before {
	font-size: 24px!important;

}

Thank you now as you can see on the below link it works perfectly thanx
can you please write down the wishlists’s blue round background color css
Because as you can see I changed the number color, but I wrote down background-color:yellow;
didnt work still the same blue background color

Here is a snippet to change wishlist number background

.right-column .wishlist-info-widget > a > span {
	background: yellow!important;

}

Thank you very much
All worked
THANX

You are welcome!

[Author]

Posts