How to Add Icons to the Divi Menu – Divi Nation Short

Posted on July 1, 2016 by in Divi Resources | 55 comments

How to Add Icons to the Divi Menu – Divi Nation Short

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.

How to Add Icons to the Divi Menu – Divi Nation Short

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:

Summary: How to Add Icons to the Divi Menu

add-icon-to-divi-menu-00

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!

add-icon-to-divi-menu-01

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.

add-icon-to-divi-menu-02

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-icon-to-divi-menu-03

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-icon-to-divi-menu-04

Add the new custom link to your menu and click save. You should now have a Divi menu with an icon in it.

add-icon-to-divi-menu-05

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-2-6-logo

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.

Learn More About Divi 3.0


55 Comments

  1. Thanks guys, awesome stuff.

    It is great to get all these little tips.

  2. 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!

  3. A simple little tip.

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

      • This is great, thanks!!

    • 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;
      }

  5. This was surprisingly easy … and USEFUL.

    I had no idea we could do this without code….

  6. What would be the way to use ETmodules font instead of an image ?

  7. A simple, yet effective little tip! I’ll be using this very soon. You guys rock 😉

  8. love this! how can i change the default mail and phone icon in the secondary menu?

  9. Thanks Nathan. This will going to help me a lot.

    Exactly @Verdi I was thinking the same way you have specified.

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

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

  11. So simple, thanks!!!

  12. Why not use Font Awesome Icons?

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

    • Maybe you need some extra special??

  13. Thank you. This is a very useful tip that I have been wondering about.

  14. 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!

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

  16. Any chance of doing a mega menu eventually? Using a plugin now but would like to use something native. thanks!

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

    • 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

    • Hi Justin,

      Saldy your code is not visible. Could you paste link to it? I’d really like to try it out.

      Thanks!

  18. 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!

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

  20. Thanks. That was very helpful.

  21. I CONclude DIVI Rocks 😉

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

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

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

  25. Thank you, what a great idea and very simple.

  26. 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 🙁

437,821 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest