How To Add Icons To The Divi Menu

[@Julieskvz]

Great information! I used your suggestions and I got the icons on the menu. Simple to do it. Thank you for thinking on people who don’t know about coding.

[@PeeAyeCreative]

Glad it helped!

[@marciaturley2850]

Awesome, awesome tutorial! Love it! Thank you so much! You're so talented! Fun little creative twist that makes the menu really stand out! Thank you.

[@jcoreboi5017]

Bro thank you very much, your tutorials have been very very helpful...

[@PeeAyeCreative]

You're welcome, I'm so glad to hear it!

[@nokich90]

I love your tutorials, thank you very much. But somehow, I never got the icon menus display on my divi websites that way. They just doesn't show up. Do I have to install the Icon font first in the divi builder? In the tutorials it always looks like they come with the theme built it and they also show in the blurb modules etc.

[@zakshafi7595]

You still provide excellent well explained tips even at midnight. Thanks Nelson :)

[@PeeAyeCreative]

Haha thank you :)

[@THAIWAK]

Thanks for posting. Well explained.

[@PeeAyeCreative]

I'm glad you like it!

[@seldaseker6611]

Thanyk you very much Nelson, your videos are fantastic..and always good ideas..

[@PeeAyeCreative]

Glad you like them! Happy to keep doing it, let me know any ideas!

[@Repko01]

This is awesome Nelson. Thanks a lot :)

[@PeeAyeCreative]

My pleasure! :)

[@kokopelli-world]

great tutorial as usual :)

[@PeeAyeCreative]

Thank you so much for the feedback :)

[@mihosshiroma5792]

Awsome nelson! It would be great if you can show how we can put the icon on the right side of the item in the menu?

[@PeeAyeCreative]

It is more difficult on the right with "after" instead of "before" because the dropdown icon is already using the "after" pseudo class.

[@LogoIdentity]

what will be the pseudo class for top position??

[@PeeAyeCreative]

We do have a different tutorial on icons above the text.

[@WillOfTheWeb]

Would it be possible to do this but with the icon centered over the text?

[@PeeAyeCreative]

I actually have another tutorial for that!

[@WillOfTheWeb]

@@PeeAyeCreative Thanks looking at it now!

[@RikGierman]

can you also explain how to do this but than with svg images instead of a font?

[@elvandogan230]

You are the best 😊🤙

[@PeeAyeCreative]

Thank you Elvan! :)

[@kumodgadekar3155]

hello sir , when visual builder enable that time all icons seen , if visual builder closed icons becomes garbage values like backspace becomes '#', book becomes 'i', sound becomes 'z'

[@PeeAyeCreative]

Go to Divi Theme Options and turn off Dynamic Icons

[@kumodgadekar3155]

@@PeeAyeCreative working.. thank you sir......

[@tamassafrany8209]

Hi there, for me as a beginner I have put this code in several places as recommended but really nothing has happened. Might you can guide me to the right direction.

[@PeeAyeCreative]

I'm not sure what you mean. The tutorial does work, so maybe you have cache which needs cleared in order to see the cahnges.

[@robeeeeen]

Do we need to add Font Awesome CDN at Header to get those Icons?

[@PeeAyeCreative]

Only if you want to use Font Awesome...

[@MiguelQuicenoB]

Hi Nelson It would be very helpful if you make a video about making a collapsable menu for mobile, the ones I’ve seen don’t work. I assume there are different ways to do that.

[@PeeAyeCreative]

Definitely, look for that on Tuesday with the mobile menu tutorial.

[@MiguelQuicenoB]

@@PeeAyeCreative Thanks man!!!! Your channel is amazing!

[@lothanespinoza7446]

how to put the icon on the right sir?

[@PeeAyeCreative]

Simply change the :before to :after

[@NorlynCodes]

The icons only show up on the HP.

[@PeeAyeCreative]

I'm not sure what the HP is. For icons, be sure to disable Dynamic Icons in Divi Theme Options Performance settings.

[@NorlynCodes]

@@PeeAyeCreative Hello, I didn't expect you to respond. Thank you for your efforts. I found an alternative solution😊