Shopping cart and wishlist icon sets

This topic has 15 replies, 2 voices, and was last updated 7 years, 2 months ago by Artem Temos.

Viewing 16 posts - 1 through 16 (of 16 total)

Author

Posts
September 17, 2017 at 5:33 pm #19598

Oscar
Participant

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

September 17, 2017 at 7:54 pm #19600

Artem Temos
Keymaster

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

September 17, 2017 at 8:01 pm #19605

Oscar
Participant

Thanx

September 17, 2017 at 8:04 pm #19607
Artem Temos
Keymaster
Here is a code to change the color of the shopping cart icon on hover
```
div.shopping-cart>a:hover {
    color: #ff00ff;
}
```
Regards
September 17, 2017 at 8:23 pm #19608

Oscar
Participant

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

September 18, 2017 at 6:08 am #19624
Artem Temos
Keymaster
You can change the icon color with this code
```
.right-column>div a, .right-column>div ul li a {
    color: #ff0000;
}
```
September 18, 2017 at 8:04 am #19635

Oscar
Participant

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.

September 18, 2017 at 9:51 am #19643

Artem Temos
Keymaster

Hi,

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

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

September 18, 2017 at 12:08 pm #19660

Oscar
Participant

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

Attachments:
You must be logged in to view attached files.

September 18, 2017 at 12:34 pm #19666
Artem Temos
Keymaster
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
September 18, 2017 at 12:45 pm #19669

Oscar
Participant

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

September 18, 2017 at 1:33 pm #19681
Artem Temos
Keymaster
Try this
```
.shopping-cart>a:before,
.right-column .wishlist-info-widget>a:after, 
.right-column .wishlist-info-widget>a:before {
	font-size: 24px!important;

}
```
September 18, 2017 at 1:56 pm #19686

Oscar
Participant

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

September 18, 2017 at 5:10 pm #19696
Artem Temos
Keymaster
Here is a snippet to change wishlist number background
```
.right-column .wishlist-info-widget > a > span {
	background: yellow!important;

}
```
September 18, 2017 at 6:48 pm #19700

Oscar
Participant

Thank you very much
All worked
THANX

September 18, 2017 at 7:31 pm #19705

Artem Temos
Keymaster

You are welcome!
Author

Posts