customized icons

This topic has 5 replies, 2 voices, and was last updated 3 years, 2 months ago by Aizaz Imtiaz Awan.

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

Author

Posts
September 13, 2021 at 9:00 am #318113

Kas
Participant

Hi,

It is possible to use customized icons for cart, search, profile etc. in header on desktop. However in other places there are still ”standard” icons. How could I have the same customized icons I have on desktop also on:
a. the bottom navigation bar on mobile
b. sliding side-menu on mobile
c. product page (wishlist icon)?

Thank you in advance.

Kind regards,
Kas

p.s. Is it better to put extra code directly in child-files or rather in WordPress → Theme Settings → Custom CSS?

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

September 13, 2021 at 11:36 am #318176
Aizaz Imtiaz Awan
Keymaster
Hello,

I saw the screenshots you attached.

Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.
```
.single-product .wd-wishlist-icon>a:before {
    content: "";
    background-image: url(https://andersensbokhandel.com/wp-content/uploads/2021/08/heart.png);
    background-repeat: no-repeat;
    background-size: contain;
    height: 30px;
    width: 30px;
    position: absolute;
    margin-top: 0px;
    margin-left: -95px;
}

.wd-toolbar .wd-header-my-account .wd-tools-icon:before {
    content: "";
    background-image: url(https://andersensbokhandel.com/wp-content/uploads/2021/08/hallaisiken-1.png);
    background-repeat: no-repeat;
    background-size: contain;
    height: 30px;
    width: 30px;
    position: absolute;
    margin-top: -12px;
    margin-left: -15px;
}

.wd-toolbar .wd-header-wishlist .wd-tools-icon:before {
    content: "";
    background-image: url(https://andersensbokhandel.com/wp-content/uploads/2021/08/heart.png);
    background-repeat: no-repeat;
    background-size: contain;
    height: 30px;
    width: 30px;
    position: absolute;
    margin-top: -12px;
    margin-left: -15px;
}

.wd-toolbar .wd-header-cart .wd-tools-icon.wd-icon-alt:before {
    content: "";
    font-family: "woodmart-font";
    background-image: url(https://andersensbokhandel.com/wp-content/uploads/2021/08/cart.png);
    background-repeat: no-repeat;
    background-size: contain;
    height: 30px;
    width: 30px;
    position: absolute;
    margin-top: 0px;
    margin-left: -15px;
}
```
Regards.
Xtemos Studios.
September 13, 2021 at 2:50 pm #318238

Kas
Participant

Hello,

Looks magic! Thank you so much!:)

There are only two small things:

1. the heart (wishlist’s icon is on the left so far that on mobile it’s cut, and on my phone is invisible (please, look at the attached files; btw. maintanance mode is off, so you can see it on the site))
Could it be possible to place the heart-icon on the right, just by side of the ”add to cart”-button, without the text ”add to wishlist”?

2. on mobile menu sliding pannel (from the left) the iconss are still ”standard”

Thank you in advance.

Kind regards,
Kas

p.s. please, take a look at the Private Content

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

September 14, 2021 at 6:10 am #318349
Aizaz Imtiaz Awan
Keymaster
Hello,

You are Most Welcome.

1) Sorry but such modifications are not possible with Simple Custom CSS. It will also require Customizations that are beyond our limitations and support policy.

To move the button on mobile to avoid cutting try adding the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.
```
.single-product .wd-action-btn.wd-style-text>a {
    margin-left: 20px;
}
```
2) Please try adding the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.
```
.wd-nav-mobile .menu-item-wishlist>a:before {
    content: "";
    background-image: url(https://andersensbokhandel.com/wp-content/uploads/2021/08/heart.png);
    background-repeat: no-repeat;
    background-size: contain;
    height: 20px;
    width: 20px;
    position: absolute;
    margin-top: 0px;
    margin-left: -14px;
}

.wd-nav-mobile .menu-item-account>a:before {
    content: "";
    background-image: url(https://andersensbokhandel.com/wp-content/uploads/2021/08/hallaisiken-1.png);
    background-repeat: no-repeat;
    background-size: contain;
    height: 20px;
    width: 20px;
    position: absolute;
    margin-left: -18px;
}
```
Best Regards
September 14, 2021 at 8:42 am #318416

Kas
Participant

Hello,

I understand. Thank you a lot for your answers and help!

Have a wonderful day!

Kind regards,
Kas

September 14, 2021 at 9:14 am #318432

Aizaz Imtiaz Awan
Keymaster

Most Welcome!!!

If you do not mind, can you please leave a 5 stars rating for our Theme & Customer and Technical Support by going here: http://themeforest.net/downloads It will allow us to release more updates and provide dedicated support in future. It would encourage our work a lot. If you like our Theme and Support.

Thanks for contacting us.
Have a great day :-)

Topic Closed.
Best Regards.
Author

Posts