Welcome to Day 32 of our Divi 100 Marathon. Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series!
If I’ve learned one thing creating tutorials for Divi it’s that the community loves tinkering with the Divi Menus. As a staff, we are well aware of the desire for more Divi Menu options and look to expand upon the header/menu options we already provide in future updates. But in the meantime, we’re happy to offer little tips, tricks, and hacks that can be applied to the Divi header/menu area and today’s post is just that.
[powerpress]
In this episode of Divi Nation our new Divi video tutorial specialist Augustine Mak shows you how you can add icons to Divi’s menus. This simple menu hack can be used in a number of creative ways to improve the appearance and user experience of your Divi website’s header/menu section. Enjoy!
Subscribe To Our Youtube Channel
All Subscription Options:
In this tutorial we’re going to show you how to add an icon to a Divi menu. It may be easier than you think!
The first thing you need to do is actually design or acquire an icon with a transparent background. If you’re creating the icon yourself, be sure to save it as a transparent png.
Next, add a new page to your website (keep it as a draft, do not publish). Upload the icon you’ve just created to that page and in the text tab, copy the embed code. Once you’ve copied the code delete that page draft and navigate to Appearance > Menus.
Add a custom link to your menu. Put whatever destination link you would like into the link area. In the text area, paste the image code you copied a moment earlier.
Add the new custom link to your menu and click save. You should now have a Divi menu with an icon in it.
Next Week on the Divi Nation Podcast
Next week on the Divi Nation podcast I will be interview another member of the Elegant Themes staff. This time, lead designer Mario Maruffi, the talent behind all of these amazing layout packs we’ve been giving away throughout Divi 100. More than that though, he’s been working hard to make Divi itself the most beautiful website builder in the world. We’ll talk about all that and a lot more on the next episode of Divi Nation. Stay tuned!
Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!
Divi 100 Day 32
The Countdown To Divi 3.0
This post is part of our Divi 100 marathon. Follow along as we post free Divi resources for 100 days in a row! This 100-day countdown will end with the game-changing release of Divi 3.0, including our brand new visual editor built from the ground up using React. Divi 3.0 will change the way you build websites with the Divi Builder forever!
Let the countdown begin.
Thanks for the easy to follow steps. I looked at two videos and other websites and this was definitely the easiest to follow.
What is the code please to move the house up a little on the menu?
I really like using DIVI. It makes designing websites enjoyable.
hey guys! Probably it’s a very silly question but… can you actually put some text below the image?? I can’t figure it out 🙁
Excellent! Thanks a lot
Thank you, what a great idea and very simple.
Great tip!!
I wonder how can I do icon for each menu option vs just one for the whole menu? Through css?
Looking forward to apply to my work .
Hello guys. Just a little words to congratulate you for all things you do to make Divi probably the best WP theme. I’m enjoying Divi 100 and exciting de discover more about this theme every days.
Kind regards
Works fine. Thank you for all this interesting things everyday.
Neat trick! Do you have to make a new page just for the icon? Couldn’t you just upload the icon to your media library and make an embed code from the url there? Seems kinda clunky to me to create a new draft page just for that but I know that method could be easier for people who don’t know how to embed images.
Also, how does this effect SEO?
I CONclude DIVI Rocks 😉
Thanks. That was very helpful.
divi.space has another approach to icons in menu using the built in icon font – have a look here https://divi.space/divi-tutorials/divi-menu-icons-without-plugins-or-font-awesome/
Thanks, guys. I am enjoying Divi 100 so much! Not just because of all the awesome free giveaways, but because of all the little tips that I always knew Divi could probably do but I couldn’t quite figure out.
Thanks for the tip!
Nathan, although this workaround certainly is doable, it would be nice if the Divi menu could be customized e.g. with an option both text and images (e.g. a letter icon on top of “Contact”) out of the box.
Of course one could add the text in the .png icon image, but I’m wondering if there’s a drawback to this e.g. in terms of SEO – also not sure it would play nice in terms of responsiveness on smaller devices.
Surprised not many besides seemed to be missing this cf the conclusion of your recent survey… unless I completely missed it. Any plans in this regard?
Cheers!
If you want to use the Divi Icons in the Menu you can use this code:
You will have to assign an extra class to the icon to adjust the font size and color.
Hi Justin,
Saldy your code is not visible. Could you paste link to it? I’d really like to try it out.
Thanks!
Justin, where did you add the extra class?
I managed to get the icons to the menu and change the size but then all blurb icons changed to the smaller size as well.
Hi Stefan, I tied posting the code as you can see, but it got stripped every time.
I’ll try and write it here, what I did, without using code:
span class et-pb-icon extra class
The extra class you just make up, but that’s the class you target with css
span class “et-pb-icon stefan-icon”
Here is a text document with the code:
https://www.dropbox.com/s/hh7r1x189vssu3v/Icon%20Font%20In%20Menu%20Code.txt?dl=0
Any chance of doing a mega menu eventually? Using a plugin now but would like to use something native. thanks!
What a great tip! Thank you. Since I don’t have photoshop, I was able to do a work around by pasting my image onto a word doc page, making the word doc background the same color as my header background, then clipping the image and saving it as a png. Matches my header perfectly and works great.
The issue with your work around is that “Colors” can display differently on different browsers and os’s… I find that “Mac” colors can differ from “PC” colors (ioS, Android, Windows etc)… You should try https://pixlr.com/editor/ 🙂
Thanks for the tip, Pete. I’m checking it out.
Great stuff! Is there a way to add custom icons for bullets for pages? Instead of the standard boring shapes that you get with Microsoft Office for example. I’m working on a site and would like to use musical notes as the bullet icon. Any help would be greatly appreciated!
So cool. Thanks a lot!
Thank you. This is a very useful tip that I have been wondering about.
Why not use Font Awesome Icons?
Maybe you need some extra special??
where would i do that? do I need to edit function.php? or is there a way to do that in css – override the default icons?
So simple, thanks!!!
Don’t really get it, how if i want put the icon(like envelope icon) on menu ‘contact’??
You would just put the link to your contact page.
Unless you are really wanting to have a modal popup, with a contact form (which would be cooler). Maybe someone could chime in, and tell us how to do that.
Wow! Awesome tip.
Thanks Nathan. This will going to help me a lot.
Exactly @Verdi I was thinking the same way you have specified.
Found this Divi Plugin that does what we want: https://elegantmarketplace.com/product/elegant-pseudo-icons/
I’m going to try it, hope this helps you too.
Sadly it does not work the way I expected. Getting the icons in the menu works, but only above it, not next to it. Still is useful to quickly find the codes though.
For me there was one dealbreaker: It still needs flash to work!
Look up Bjarne’s link to Divi Space. Now that really works well.
love this! how can i change the default mail and phone icon in the secondary menu?
/* change the content value */
span#et-info-phone::before {
font-family: “ETmodules” !important;
content: “\e090”;
}
http://www.elegantthemes.com/blog/resources/how-to-use-and-embed-an-icon-font-on-your-website
How to get the content value:
http://www.eleganttweaks.com/divi/font-icons/
Very very nice :-))))
A simple, yet effective little tip! I’ll be using this very soon. You guys rock 😉
What would be the way to use ETmodules font instead of an image ?
@Sylvain here’s how you can do that: https://divi.space/divi-tutorials/divi-menu-icons-without-plugins-or-font-awesome/
Though I really wish ET would make it easier to call those icons anywhere. Right now it’s tedious and difficult at best. But that tutorial will get them in the menu as you’re looking for.
Home
Sorry Sylvain, my code was totally wiped out. Forgot my markdown. I meant this…
Home"
Lol, omg! Nevermind!!
Hi Jonathan,
You can write to me here if you don’t mind 😉
[email protected]
Thank you !
I’d be happy to!
This was surprisingly easy … and USEFUL.
I had no idea we could do this without code….
Thanks for sharing. Suggestion for the future:
Divi has great icons built in. Why not make those available in the Menu? This way it’s lot easier to change the size and color of them. Consistency is also a benefit.
I totally agree, now it was a bit tricky to get the blurb icons to the menu.
Had to make a blurb and preview (eye icon) and then view the frame source from there and find the span element containing the blurb icon.
Then paste the whole span into the custom links.
Then to control the size of the icons in the menu I had to add this to the css of my child theme:
/* Menu icons size control */
#main-header #top-menu span.et-pb-icon {
font-size:18px !important;
}
Verdi, its possible using a bit of css and a class in the menu entries, take a look here: https://divi.space/divi-tutorials/divi-menu-icons-without-plugins-or-font-awesome/
This is great, thanks!!
A simple little tip.
Thanks so much for these tips! I love how these icons can really make a website stand out and look unique. Will certainly be trying these out!
Thanks guys, awesome stuff.
It is great to get all these little tips.