change icon

Is there any way to change the icon of the navigation bar at the bottom of the mobile device, such as the shopping cart icon. If I customize the button, I can change the icon, but I don’t know the code of the AJAX shopping cart and AJAX searching.
Thanks

Hello,

You can replace the icons with Fotawesome icons https://fontawesome.com/

Chose the icons, provide the links, and you site URL so that I could provide custom CSS.

Best Regards.

Can I modify it through the custom button? There are custom buttons in the navigation bar of the mobile device. Here you can change the icon, but I want to know what the URL of the AJAX shopping cart is? Or do we need to implement it through custom

Hello,

You need to configure the bottom navbar and provide the Fontawesome links so that we could give you custom CSS and replaced the icons.

You can see the option to configure your custom links with image icons. Such an option is not available for the shopping cart widget.

Best Regards

Can I upload pictures to my website and use links from my website?
Thanks

Hello,

What icon do you want please provide.

Best Regards

.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .my-account-with-icon .wd-tools-icon{
    color:transparent;
    width:30px;
	  height:30px;
	  background-image:url(https://onemorestuff.com/wp-content/uploads/2020/09/user.svg);
	  background-position:center center;
    background-size:contain;
	background-repeat:no-repeat;
}
body .woodmart-shopping-cart.woodmart-cart-alt .woodmart-cart-icon {
	 color:transparent;
    content: "";
    width:30px;
	  height:25px;
	  background-image:url(https://onemorestuff.com/wp-content/uploads/2020/08/items.svg);
	  background-position:center center;
    background-size:contain;
	background-repeat:no-repeat;
}
body .woodmart-wishlist-info-widget .wishlist-icon {
	 color:transparent;
    content: "";
    width:30px;
	  height:25px;
	  background-image:url(https://onemorestuff.com/wp-content/uploads/2020/08/love.svg);
	  background-position:center center;
    background-size:contain;
	background-repeat:no-repeat;
}

Best Regards

This is working！ but there still a problem, it only changes the homepage settings, and when the page is switched to another page, it will become the same

Hello,

Please provide the page URL into the private area. I am checking other pages and see custom icons: https://prnt.sc/ub6bpj

Best Regards

hi, can I put this on “Custom CSS for mobile”not on”Global Custom CSS”?
because after I use the Custom CSS There is a smaller wish on the desktop display see picture
https://prnt.sc/ubbkd8
When I set the wish icon as the default, or set it to custom but do not upload images, it will display the icon in CSS, but the other two graphics do not have this situation. When I use the custom image, it will be larger than wish’s, when I set it as the default icon, it will become the default icon instead of the icon I want. When I set the custom icon without uploading the icon, it will disappear. So it’s hard for me to unify the size.

Thanks I have no problem now. I put the CSS in custom CSS for mobile, and then customize its icon in the header. It can be displayed on computers and mobile phones.
thanks

I found that the icon will change back when the phone screen is turned over whitch is wierd

Hello,

Please add this code to the Theme Settings > Custom CSS > Global and check.

When you insert the custom CSS to Mobile only, it does not take effect on wider mobile screen.

Best Regards

after I use the Custom CSS > Global
There is a smaller wish on the desktop display see picture
https://prnt.sc/ubbkd8
When I set the wish icon as the default on Headbuilder, or set it to custom but do not upload images, it will display the icon in CSS,
but the other 3 graphics(cart search and user) do not have this situation. When I use the custom image, it will be larger than(cart search and user), when I set it as the default icon, it will become the default icon instead of the icon that I put in CSS. When I set the custom icon without uploading the icon, it will disappear. So it’s hard for me to unify the size.

Hello,

These is mobile navbar buttons. Please check on real mobile devices and provide the screen. How can you view it on a desktop? Do you narrow/speak the browser window? If yes, reload the page before viewing it.

Best Regards

I mean we put this CSSon the Custom CSS > Global
one of the icons shows on the header for desktop
see the picture
https://prnt.sc/ubbkd8
the small one is form CSS
this one is for the wish list
another 2 is fine they don’t show on desktop header
If I customize the wish icon in the header. This will appear in the picture above, it has two overlapping icon
If I don’t set the icon in the header, the wish icon is smaller than the other two
so

Hello,

You want custom icons on Mobile and default icons on the header, please confirm.

Best Regards

no, I want both customs icons

.0.

Hello,

I see the same icons on desktop and mobile. I am confused and do not understand your purpose.

Please confirm you want the same icons on both mobile and desktop.

If you do not want, provide the images for the desktop.

If the icons are different on different pages, provide page URL, screen, and site admin access.

Best Regards

I want to use the same icons on mobile and on the desktop.
I make a video I hope it can make us clear…
https://streamable.com/m105o3

This is an overlay of two icons if the video is not clear
https://prnt.sc/ud6he6

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body  .wd-tools-element .woodmart-cart-icon.wd-tools-icon {
    color:transparent;
    content: "";
    width:40px;
	  height:40px;
	  background-image:url(https://onemorestuff.com/wp-content/uploads/2020/08/items.svg);
	  background-position:center center;
    background-size:contain;
	background-repeat:no-repeat;
}

Best Regards

thanks its working good now

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts