customized icons

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.

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.

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.

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

Hello,

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

Have a wonderful day!

Kind regards,
Kas

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