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.
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.
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.
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.
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?
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.