Own icons in mobile menue

This topic has 14 replies, 2 voices, and was last updated 3 years, 1 month ago by Elise Noromit.

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

Author

Posts
January 7, 2022 at 1:41 pm #343988

Frieda
Participant

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.

January 7, 2022 at 11:17 pm #344066

Elise Noromit
Member

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

January 8, 2022 at 3:03 pm #344137
Frieda
Participant
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.
January 9, 2022 at 11:32 am #344192

Elise Noromit
Member

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

January 9, 2022 at 12:29 pm #344200

Frieda
Participant

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.

January 9, 2022 at 7:28 pm #344229

Elise Noromit
Member

Hello,

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

Best Regards

January 9, 2022 at 7:51 pm #344235

Frieda
Participant

Hello,

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

Best Regards

What kind of credentials you mean?!?!

January 9, 2022 at 8:41 pm #344238
Frieda
Participant
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(" "); 
}
```
……
January 10, 2022 at 10:25 am #344311
Elise Noromit
Member
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
January 10, 2022 at 10:41 am #344315
Frieda
Participant
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.
January 10, 2022 at 2:35 pm #344379

Elise Noromit
Member

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

January 11, 2022 at 3:22 pm #344597

Frieda
Participant

See private content….

January 11, 2022 at 11:40 pm #344657

Elise Noromit
Member

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

January 12, 2022 at 9:16 am #344745

Frieda
Participant

Fantastics….it works! Thank you very much!

January 12, 2022 at 4:32 pm #344929

Elise Noromit
Member

You are welcome! We are here to help.

Wish you a wonderful day!
Author

Posts