Own icons in mobile menue

Hi all,

i find a lot of discussion in this forum to my question but without a really solution…..

Is it possible to insert my own icons instead of the “FonAwesome” Website? Maybe with the help pf CSS? Attached one picture which icon i mean….Thank you

Attachments:

You must be logged in to view attached files.

Hello,

You will need to assign different classes to each menu item and add icons as a background with custom CSS for each item.

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

Best Regards

[Frieda]

Works well thank you. But one question. Can you told me how i can shift just the words to the right position (see screenshot). But really just the words and not the line underneathe for example…Thanks!

• This reply was modified 3 years, 1 month ago by Frieda.

Attachments:

You must be logged in to view attached files.

Hello,

How do you want to move the text?

What way the icon should be: on the left or on the right side of the text?

Best Regards

It would be perfect when it look similar to the one wehre i have added the FontAwesome icons . See attached:

Attachments:

You must be logged in to view attached files.

Hello,

Please insert the credentials into the Private content below the message area.

Best Regards

Hello,

Please insert the credentials into the Private content below the message area.

Best Regards

What kind of credentials you mean?!?!

I got it….with the help of folliwng CSS Code i can insert the icons like i want….
But now the next question… I have approx 15 menues. How i can make the CSS code more performant. In this moment i write the complete code for each menue like the code below.

Maybe is it possible to write the formating section just one time?!

.menue-1{	
 	 text-indent: 25px;	
	 background-position: 5% 50%;
	 background-size: 25px;
	 background-repeat: no-repeat ;
	 background-image: url(" "); 
}

.menue-2{	
 	 text-indent: 25px;	
	 background-position: 5% 50%;
	 background-size: 25px;
	 background-repeat: no-repeat ;
	 background-image: url(" "); 
}

.menue-3{	
 	 text-indent: 25px;	
	 background-position: 5% 50%;
	 background-size: 25px;
	 background-repeat: no-repeat ;
	 background-image: url(" "); 
}

.menue-4{	
 	 text-indent: 25px;	
	 background-position: 5% 50%;
	 background-size: 25px;
	 background-repeat: no-repeat ;
	 background-image: url(" "); 
}

……

Hello,

You can create one common code for all menu items like this:

.wd-nav > li > a{
 	 text-indent: 25px;	
	 background-position: 5% 50%;
	 background-size: 25px;
	 background-repeat: no-repeat ;
}

Then you will need to write a changeable part for each item like this:

.wd-nav > li > a.menue-4{
background-image: url(" "); 
}

As the result, you will have 15 short snippets.

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

Best Regards

[Frieda]

Dear Elise,

many thanks for your reply (i know this is not part of you Theme-Support…)

But it is not working anymore. The Background isn’t showing (see blue arrow). And would it be possible to activate the formating not for the main topics (see red arrow) I just need the Background as well the shifting of the text etc. for the green arrow categories.

Thank you!

• This reply was modified 3 years, 1 month ago by Frieda.
• This reply was modified 3 years, 1 month ago by Frieda.

Attachments:

You must be logged in to view attached files.

Hello,

Please insert the credentials into the Private content below the message area as well as the image URL for one menu item you are going to apply, I will give your a common and sample of the individual CSS.

Best Reards

See private content….

Hello,

You told me about approximately 15 menu items and I have omitted that you are talking about the Product category menu. You do not need CSS to add icons to the categories.

You need to have equal sizes icons and upload them to each category and it will be shown in all the menus. You can find the instruction here: https://xtemos.com/docs/woodmart/product-category-menu/

As soon as you add the icons we will add the text ident for those that do not have the icon.

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

Best Regards

Fantastics….it works! Thank you very much!

You are welcome! We are here to help.

Wish you a wonderful day!

[Author]

Posts