Change icon header and display icon + text

Hello,

How i can change icon in the header ?
I need a solution with my website because the header is “transparent” and with a white background when we scroll.
So the icon is white with the transparent menu and black with a white background.

Do you understand me ?

More, can i display icon + text on the header ?
Please, see my screenshot to understand what i want.

Thank you so much !

Have a nice day !
Quentin

Sorry, i forgot the attached file

Attachments:

You must be logged in to view attached files.

Hello,

In order to change the icon in the header, navigate to WoodMart -> Header builder -> edit some element with the icon and in the settings click on the “Custom Icon” type.

https://prnt.sc/1yvwc3d

Some elements like the “Cart” have several variants of their icon.

https://prnt.sc/1yvwocu

You can display the text with an icon only on the elements that have in the settings appropriate option (like the “Wishlist” or “Compare” elements have the “Icon with text” option).

https://prnt.sc/1yvxzdk

If you want to change the color of icons on the transparent header try to change the color scheme, edit some header section (like Main header) -> in the “Colors” settings select another color scheme in the “Text color scheme” field.

https://prnt.sc/1yvzdi8

https://prnt.sc/1yvzlpk

Kind Regards

Hello,

Thank you for your reply but it doesn’t work.
When i upload a new icon, don’t change.. How i can do ?

Thanks

Attachments:

You must be logged in to view attached files.

The icon change work but the color changement doesn’t work, can you help me please ?

Hello,

Please, provide your site admin access to the private area. I will check your issue and find a solution.

Kind Regards

Ok, find admin access in private content

Thank you for your help

Hello,

I have checked your site and it works well.

Please clarify your issue where we can find it and in which header.

Kind Regards

Hello,

Yes it’s work with your icon, but when i upload my icon, they don’t change color.
How i can solve the problem ?

Thanks

Hello,

We are using icons web fonts (fonts that are made up of icons) in the header, such icons may change color using CSS. But you tried to use icons like images or SVG that already have some color and CSS cannot affect it.

In order to change the icon that changes the color, you can try to use this custom CSS code in Theme Settings -> Custom CSS -> enter this code in the “Global Custom CSS” field.

.whb-main-header .wd-header-cart .wd-tools-icon.wd-icon-alt:before {
    content: "\f218";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

Kind Regards

Okay nice i’ll try

Thanks

Hello,

You are welcome!

Let us know if you have any questions, we will be happy to help.

Kind Regards

Hello,

Nice, it’s work !

How i can use pro icons ?

Can you send me the css code to change :
– Account icon
– Wishlist icon
– Search icon

Thank you !

Hello,

Unfortunately, only the free version of the icons is available on your site.

Here is a custom CSS code to change these icons:

The search icon:

.whb-main-header .wd-header-search .wd-tools-icon:before {
    content: "\f00e";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

The wishlist icon:

.whb-main-header .wd-header-wishlist .wd-tools-icon:before {
    content: "\f004";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

The account icon:

.whb-main-header .wd-header-my-account .wd-tools-icon:before {
    content: "\f2bd";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

Kind Regards

Hello,

Perfect, thank you !

I’ll try.

Have a nice day !

Hello,

If you have any questions please feel free to contact us.

Have a wonderful day!

Kind Regards

Hello,

For the cart in the header, can i display only the text “Cart” without icon, prices or currency ?

Thanks

Hello,

– For the cart in the header, can i display only the text “Cart” without icon, prices or currency ?

– How i can change the text color for “cart” and “my account” in the header ?

Thanks

Hello,

1. Unfortunately, you can only replace the default icon with your own but display text instead of the icon you cannot.

2. Here is a code for changing the color of the “My Account” text.

.wd-header-my-account.wd-tools-element>a {
    color: #5600ff;
}

Kind Regards

Hello,

Thank you for your help.

Have a nice day !

Hello,

We are always happy to help you, write to us when you have any difficulties or issues with our theme.

We wish you all the best.

Kind Regards

[Author]

Posts