{"id":407548,"date":"2023-12-09T04:02:37","date_gmt":"2023-12-09T10:02:37","guid":{"rendered":"https:\/\/divicake.com\/?p=407548"},"modified":"2024-03-25T02:43:42","modified_gmt":"2024-03-25T07:43:42","slug":"create-and-style-a-divi-menu-add-icons-and-images-to-the-divi-menu","status":"publish","type":"post","link":"https:\/\/divicake.com\/blog\/create-and-style-a-divi-menu-add-icons-and-images-to-the-divi-menu\/","title":{"rendered":"Create and Style a Divi Menu: Add Icons and Images To The Divi Menu"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_64 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >Overview<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/divicake.com\/blog\/create-and-style-a-divi-menu-add-icons-and-images-to-the-divi-menu\/#Step_1_Adding_Images_To_Divi_Menu\" title=\"Step 1: Adding Images To Divi Menu\">Step 1: Adding Images To Divi Menu<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/divicake.com\/blog\/create-and-style-a-divi-menu-add-icons-and-images-to-the-divi-menu\/#Enhance_the_appearance_of_your_Divi_menu_by_adding_style_to_the_image\" title=\"Enhance the appearance of your Divi menu by adding style to the image!\">Enhance the appearance of your Divi menu by adding style to the image!<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/divicake.com\/blog\/create-and-style-a-divi-menu-add-icons-and-images-to-the-divi-menu\/#Apply_Custom_CSS_To_The_Image\" title=\"Apply Custom CSS To The Image\">Apply Custom CSS To The Image<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/divicake.com\/blog\/create-and-style-a-divi-menu-add-icons-and-images-to-the-divi-menu\/#Final_Look_After_Adding_the_CSS\" title=\"Final Look After Adding the CSS\">Final Look After Adding the CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/divicake.com\/blog\/create-and-style-a-divi-menu-add-icons-and-images-to-the-divi-menu\/#Second_Step_Add_Icons_To_The_Divi_Menu\" title=\"Second Step: Add Icons To The Divi Menu\">Second Step: Add Icons To The Divi Menu<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/divicake.com\/blog\/create-and-style-a-divi-menu-add-icons-and-images-to-the-divi-menu\/#Add_Icons_To_The_Divi_Top_Level_Menu\" title=\"Add Icons To The Divi Top Level Menu\">Add Icons To The Divi Top Level Menu<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/divicake.com\/blog\/create-and-style-a-divi-menu-add-icons-and-images-to-the-divi-menu\/#Add_Icons_To_The_Divi_Submenu\" title=\"Add Icons To The Divi Submenu\">Add Icons To The Divi Submenu<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/divicake.com\/blog\/create-and-style-a-divi-menu-add-icons-and-images-to-the-divi-menu\/#Customizing_The_Icons_For_Each_Menu_Items\" title=\"Customizing The Icons For Each Menu Items\">Customizing The Icons For Each Menu Items<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/divicake.com\/blog\/create-and-style-a-divi-menu-add-icons-and-images-to-the-divi-menu\/#Final_Look_of_the_Menu\" title=\"Final Look of the Menu:\">Final Look of the Menu:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/divicake.com\/blog\/create-and-style-a-divi-menu-add-icons-and-images-to-the-divi-menu\/#How_To_Choose_The_Icons_For_The_Divi_Menu\" title=\"How To Choose The Icons For The Divi Menu\">How To Choose The Icons For The Divi Menu<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/divicake.com\/blog\/create-and-style-a-divi-menu-add-icons-and-images-to-the-divi-menu\/#1_ETModules\" title=\"1. ETModules\">1. ETModules<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/divicake.com\/blog\/create-and-style-a-divi-menu-add-icons-and-images-to-the-divi-menu\/#2_Font_Awesome\" title=\"2. Font Awesome\">2. Font Awesome<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/divicake.com\/blog\/create-and-style-a-divi-menu-add-icons-and-images-to-the-divi-menu\/#Conclusion\" title=\"Conclusion:\">Conclusion:<\/a><\/li><\/ul><\/nav><\/div>\n\n<p>In the online world, where pictures really count, <a href=\"https:\/\/divicake.com\/blog\/divi-icons\/\">icons<\/a> and images are like the superheroes of the web. When we build websites, we know icons and images can show feelings, share info, and just make things look cool. Ever thought about adding icons and images in your <a href=\"https:\/\/divicake.com\/go\/divi\/\">Divi<\/a> menu? Well, this guide is here to help you do just that \u2013 add images and icons to your Divi menu. This guide has two steps: first, we&#8217;ll add images to the divi menu, and then, in the second step, we&#8217;ll add icons. So, get ready as we dive into making your Divi menu look awesome with these easy steps!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_1_Adding_Images_To_Divi_Menu\"><\/span>Step 1: Adding Images To Divi Menu<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Want to make your menu more interesting? Well, here&#8217;s a thought: you can put pictures in the main <a href=\"https:\/\/divicake.com\/blog\/divi-menu-styles\/\">menu<\/a>, but the really cool spots are in the drop-down menu and mega menu. These places are like the VIP sections for your pictures! Imagine this: a picture you can click that takes you right to a product or a blog post. Cool, right? Let&#8217;s start and give your menu some awesome visual vibes!<\/p>\n\n\n\n<p>Time to work some magic on your WordPress dashboard! First, click on <strong>&#8220;Appearance&#8221;<\/strong> and then select <strong>&#8220;Menus&#8221;.<\/strong> You&#8217;ve got two choices here: make a new menu or jazz up an existing one with a cool image. Find your menu and look for <strong>&#8220;Custom Links&#8221;<\/strong> under <strong>&#8220;Add menu items&#8221;<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"415\" src=\"https:\/\/divicake.com\/wp-content\/uploads\/creating-a-custom-link-in-the-menu-1024x415.png\" alt=\"\" class=\"wp-image-407550\" srcset=\"https:\/\/divicake.com\/wp-content\/uploads\/creating-a-custom-link-in-the-menu-980x397.png 980w, https:\/\/divicake.com\/wp-content\/uploads\/creating-a-custom-link-in-the-menu-480x195.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Creating a Custom Link<\/p>\n\n\n\n<p>Now, for a quick trick to jazz up your menu! Put a hashtag <strong>#<\/strong> in the <strong>URL: box<\/strong>, and then hit the <strong>&#8220;Add to Menu&#8221;<\/strong> button.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"537\" height=\"536\" src=\"https:\/\/divicake.com\/wp-content\/uploads\/adding-to-the-custom-link-1.png\" alt=\"A quick trick to jazz up your menu! Put a hashtag # in the URL: box, and adding it to the menu.\" class=\"wp-image-407551\" srcset=\"https:\/\/divicake.com\/wp-content\/uploads\/adding-to-the-custom-link-1.png 537w, https:\/\/divicake.com\/wp-content\/uploads\/adding-to-the-custom-link-1-480x479.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 537px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Putting a hashtag in the URL box<\/p>\n\n\n\n<p>Let&#8217;s tweak the menu a bit for a more personalized touch! Choose your preferred main menu item, and under it, we&#8217;ll neatly arrange a custom link. Open up the menu item toggle to give us some space to work. Now, for the exciting part \u2013 we&#8217;re spicing things up by adding an i<a href=\"https:\/\/divicake.com\/blog\/13-free-background-images-use-next-divi-website\/\">mage<\/a> to our custom link menu item using a simple HTML image code. Just copy and paste the snippet provided below into the <strong>Navigation Label<\/strong> field. It&#8217;s an easy way to make your menu stand out with a unique touch!<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n   &lt;img src=&quot;Insert Image URL Here&quot; alt=&quot;Alternate Text&quot; \/&gt;\n<\/pre><\/div>\n\n\n<p>Follow the below screenshot for more understanding:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"520\" height=\"431\" src=\"https:\/\/divicake.com\/wp-content\/uploads\/Navigation-Label-Url.png\" alt=\"Adding an image to our custom link menu item using a simple HTML image code.\" class=\"wp-image-407553\" srcset=\"https:\/\/divicake.com\/wp-content\/uploads\/Navigation-Label-Url.png 520w, https:\/\/divicake.com\/wp-content\/uploads\/Navigation-Label-Url-480x398.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 520px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Adding HTML image code to navigation label<\/p>\n\n\n\n<p>Before we move on, don&#8217;t forget to hit the <strong>&#8216;save&#8217; <\/strong>button in the menu settings to lock in your changes. Now, for the final touch, let&#8217;s ensure the image <strong>URL<\/strong> in the code snippet is spot on. Head over to the Media Library \u2013 you can either upload a new picture or pick one you already have. This step is where we make sure the image you want is linked correctly.<\/p>\n\n\n\n<p><strong>Read More:<\/strong> <a href=\"https:\/\/divicake.com\/blog\/creating-a-hover-reveal-effect-for-divi-blurb\/\">Creating an Eye-Catching Hover Reveal Effect for the Divi Blurb Module<\/a><\/p>\n\n\n\n<p>When you find the picture you like for your Divi menu, click on it. This takes you to the settings in WordPress media. Scroll down, and you&#8217;ll see <strong>&#8220;Copy Link&#8221;<\/strong> at the bottom. Just click on that to copy the link. This way, you&#8217;ve got the link ready to add your chosen image to the menu without any fuss!<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"396\" src=\"https:\/\/divicake.com\/wp-content\/uploads\/image-link-1024x396.png\" alt=\"This way, you've got the link ready to add your chosen image to the menu without any fuss!\" class=\"wp-image-407554\" srcset=\"https:\/\/divicake.com\/wp-content\/uploads\/image-link-980x379.png 980w, https:\/\/divicake.com\/wp-content\/uploads\/image-link-480x186.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Image URL<\/p>\n\n\n\n<p>Now go back to your menu where you pasted the image HTML in the previous step. You need to replace the text that says <strong>\u201cInsert Image URL Here\u201d<\/strong> with the link you just copied, it is also shown and highlighted in the image below:<\/p>\n\n\n\n<p><strong>Note:<\/strong> Don\u2019t forget to save your menu after pasting the link!<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img decoding=\"async\" width=\"836\" height=\"450\" src=\"https:\/\/divicake.com\/wp-content\/uploads\/link-pasting-of-the-image.png\" alt=\"Replacing the text that says \u201cInsert Image URL Here\u201d with the copied link.\" class=\"wp-image-407555\" style=\"aspect-ratio:1.8577777777777778;width:823px;height:auto\" srcset=\"https:\/\/divicake.com\/wp-content\/uploads\/link-pasting-of-the-image.png 836w, https:\/\/divicake.com\/wp-content\/uploads\/link-pasting-of-the-image-480x258.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 836px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Inserting image url to the custom link<\/p>\n\n\n\n<p>Now, go and see how your menu looks. Check out the changes you made:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img decoding=\"async\" width=\"949\" height=\"368\" src=\"https:\/\/divicake.com\/wp-content\/uploads\/picture-at-the-menu.png\" alt=\"An image has been inserted at the menu\" class=\"wp-image-407556\" style=\"aspect-ratio:2.578804347826087;width:823px;height:auto\" srcset=\"https:\/\/divicake.com\/wp-content\/uploads\/picture-at-the-menu.png 949w, https:\/\/divicake.com\/wp-content\/uploads\/picture-at-the-menu-480x186.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 949px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Image at the Menu<\/p>\n\n\n\n<p><strong>Read More: <\/strong><a href=\"https:\/\/divicake.com\/blog\/how-to-add-a-button-to-a-divi-blurb-module\/\">How To Add A Button To A Divi Blurb Module<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Enhance_the_appearance_of_your_Divi_menu_by_adding_style_to_the_image\"><\/span>Enhance the appearance of your Divi menu by adding style to the image!<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Let&#8217;s simplify things as much as we can! Go back to your menu once more and check out the top corner for something called <strong>&#8220;Screen Options.&#8221;<\/strong> Click on that, and hunt for an option labeled <strong>&#8220;CSS Classes.&#8221;<\/strong> Make sure to tick that box\u2014it&#8217;s essential. This simple step sets you up for an effortless way to target the image with <strong>CSS<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"149\" src=\"https:\/\/divicake.com\/wp-content\/uploads\/screen-options-1024x149.png\" alt=\"This simple step sets you up for an effortless way to target the image with CSS.\" class=\"wp-image-407557\" srcset=\"https:\/\/divicake.com\/wp-content\/uploads\/screen-options-980x142.png 980w, https:\/\/divicake.com\/wp-content\/uploads\/screen-options-480x70.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Enabling the CSS classes from the screen option<\/p>\n\n\n\n<p>Now that you&#8217;ve got your image in place on the menu item, it&#8217;s time to add a little extra style! Look out for a new field called <a href=\"https:\/\/divicake.com\/blog\/how-to-add-custom-css-to-divi\/\">CSS<\/a> Class (optional) within that specific menu item with the image. Here&#8217;s where you can give it a special tag, something straightforward like &#8220;menu-image&#8221; in this example. It&#8217;s a neat way to make your menu item look even cooler!<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img decoding=\"async\" width=\"521\" height=\"482\" src=\"https:\/\/divicake.com\/wp-content\/uploads\/menu-css-class.png\" alt=\"Giving the image a personal touch with CSS styles\" class=\"wp-image-407558\" style=\"aspect-ratio:1.0809128630705394;width:521px;height:auto\" srcset=\"https:\/\/divicake.com\/wp-content\/uploads\/menu-css-class.png 521w, https:\/\/divicake.com\/wp-content\/uploads\/menu-css-class-480x444.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 521px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Adding CSS class to the custom link<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Apply_Custom_CSS_To_The_Image\"><\/span>Apply Custom CSS To The Image<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Now, let&#8217;s dive into the exciting part \u2013 giving your image a personal touch with CSS styles! No need to stick to strict rules here \u2013 feel free to have some fun experimenting until you achieve the perfect look. If you&#8217;re keen on using our CSS, just copy and paste the code provided below into <strong>Divi&gt;Theme Options&gt;Custom CSS code box<\/strong>.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n\n.menu-image img {\n    border-radius: 10px;\n}\n\n.menu-image a {\n    padding: 0!important;\n}\n\n.menu-image a:hover {\n    opacity: 1!important;\n}\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Final_Look_After_Adding_the_CSS\"><\/span>Final Look After Adding the CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"909\" height=\"244\" src=\"https:\/\/divicake.com\/wp-content\/uploads\/final-look.png\" alt=\"Final look of the image at the menu after applying CSS style\" class=\"wp-image-407559\" srcset=\"https:\/\/divicake.com\/wp-content\/uploads\/final-look.png 909w, https:\/\/divicake.com\/wp-content\/uploads\/final-look-480x129.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 909px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Final look of the menu after inserting the image<\/p>\n\n\n\n<p>Now that we&#8217;ve finished adding images to the Divi menu, it&#8217;s time to move on to the next step: adding icons. In the next section, we&#8217;ll learn how to put those little pictures into your menu. Get set to make your menu look even cooler with these icons!<\/p>\n\n\n\n<p><br><strong>Read More:<\/strong> <a href=\"https:\/\/divicake.com\/blog\/replacing-divi-blurb-icon-with-font-awesome-icon\/\">Replace the Divi Blurb Icon With a Font Awesome Icon: A Step-by-step Guide<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Second_Step_Add_Icons_To_The_Divi_Menu\"><\/span>Second Step: Add Icons To The Divi Menu<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Icons can really spice up your menu and make things interesting. The perfect icon not only hints at what the link is about but also adds a nice touch of reality.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Add_Icons_To_The_Divi_Top_Level_Menu\"><\/span>Add Icons To The Divi Top Level Menu<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>The CSS code you see here is for the main menu items. Whether you&#8217;re using the standard Divi module, the Theme Builder, or any other place with the Menu module, this code will do the trick. Once you&#8217;ve copied and pasted it, we will talk more about tweaking it to suit your style \u2013 like changing the icon or adjusting the color. Paste this code in your <strong>Divi&gt;Theme Options&gt;Custom CSS code box.<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n  \n\n  nav li a:before {\n    font-family: &#039;ETMODULES&#039;;\n    content: &#039;\\24&#039;;\n    text-align: center;\n    vertical-align: middle;\n    margin-right: 10px;\n    margin-left: -10px;\n    color: #2cba6c;\n    font-size: 1em;\n    transition: all .3s ease;\n  }\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Add_Icons_To_The_Divi_Submenu\"><\/span>Add Icons To The Divi Submenu<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Here&#8217;s where the magic happens for your submenu! This snippet is all about adding icons to the links that pop up in your Divi menu&#8217;s dropdown. Whether it&#8217;s in the Menu module or the regular menu, the process is the same. All you need to do is copy and paste this code into your <strong>Divi&gt;Theme Options&gt;Custom CSS code box.<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\nnav li li a:before {\n    font-family: &#039;ETMODULES&#039;;\n    content: &#039;\\24&#039;;\n    text-align: center;\n    vertical-align: middle;\n    margin-right: 10px;\n    margin-left: -10px;\n    color: #2cba6c;\n    font-size: 1em;\n    transition: all .3s ease;\n }\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Customizing_The_Icons_For_Each_Menu_Items\"><\/span>Customizing The Icons For Each Menu Items<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Up until now, the code we&#8217;ve used would add the same icon to all the main menu or submenu links. Maybe that&#8217;s perfect for your site, and it does wonders on mine too. But here&#8217;s the fun part \u2013 you can actually set a different icon for every menu item. It&#8217;s easy; you just need to add a new CSS class for each menu item. Let us show you how to make each menu item stand out with its unique icon!<\/p>\n\n\n\n<p>Take a look at the image below, illustrating the process of adding a CSS tag to a submenu item.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"522\" height=\"406\" src=\"https:\/\/divicake.com\/wp-content\/uploads\/adding-css-class-to-the-submenu-item.png\" alt=\"Applying a CSS class to the sub-menu item to integrate the CSS code that is responsible for incorporating an icon into it.\" class=\"wp-image-407560\" srcset=\"https:\/\/divicake.com\/wp-content\/uploads\/adding-css-class-to-the-submenu-item.png 522w, https:\/\/divicake.com\/wp-content\/uploads\/adding-css-class-to-the-submenu-item-480x373.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 522px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Adding a CSS class to the sub menu item<\/p>\n\n\n\n<p>Now, let&#8217;s focus on the menu item we tagged as <strong>&#8220;menu-services&#8221;.<\/strong> We&#8217;re aiming to include an icon, so we&#8217;ll incorporate <strong>&#8220;\\e018&#8221;<\/strong> into the CSS snippet. Simply follow these steps: copy the code below and paste it into <strong>Divi &gt; Theme Options &gt; Custom CSS code box.<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.menu-services &gt; a:before {\n    font-family: &#039;ETMODULES&#039;;\n    content: &#039;\\e018&#039;;\n    text-align: center;\n    vertical-align: middle;\n    margin-right: 10px;\n    margin-left: -10px;\n    color: #2cba6c;\n    font-size: 1em;\n    transition: all .3s ease;\n}\n<\/pre><\/div>\n\n\n<p><strong>Read More:<\/strong> <a href=\"https:\/\/divicake.com\/blog\/how-to-rearrange-divi-blurb-module\/\">How to Rearrange the Divi Blurb Module: Placing the Title Above the Image<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Final_Look_of_the_Menu\"><\/span>Final Look of the Menu:<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"904\" height=\"272\" src=\"https:\/\/divicake.com\/wp-content\/uploads\/final-look-of-the-menu.png\" alt=\"In the online world, icons and images act as web superheroes, conveying emotions, sharing information, and enhancing visual appeal.\" class=\"wp-image-407561\" srcset=\"https:\/\/divicake.com\/wp-content\/uploads\/final-look-of-the-menu.png 904w, https:\/\/divicake.com\/wp-content\/uploads\/final-look-of-the-menu-480x144.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 904px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Insertion of icon at the menu<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_To_Choose_The_Icons_For_The_Divi_Menu\"><\/span>How To Choose The Icons For The Divi Menu<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Now, let&#8217;s talk about the next step: changing the icon. You have the fun part of picking an icon, and you&#8217;ve got two cool options. You can choose from Divi&#8217;s own <strong>ETModules <\/strong>icon font family or <strong>Font Awesome<\/strong> icon font family. When it comes to icons for your Divi menu Module, there are lots of good ones to consider. We&#8217;ll focus on two in this guide\u2014one that&#8217;s already in Divi and another that&#8217;s easy to add. Now let&#8217;s discuss each part in detail:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_ETModules\"><\/span>1. ETModules<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>So, in Divi, there&#8217;s a set of <a href=\"https:\/\/www.markhendriksen.com\/full-list-of-all-divi-icon-codes\/\" target=\"_blank\" rel=\"noopener\">icons<\/a> that are ready to use right away. You don&#8217;t need to do anything special to get them working. All you have to do is pick the icon you want and then use it. Curious about all the icons in Divi? You can find the complete list on this blog. It&#8217;s a great way to explore and see all the awesome icons available to use!<\/p>\n\n\n\n<p>In the code snippets, we already have <strong>\u201cfont-family: \u2018ETMODULES\u2019;\u201d<\/strong> as the font family, so if you use any of these icons you won\u2019t have to change anything. You can choose any icon you want. Check out these examples of icons available for use:<\/p>\n\n\n\n<p>In the code snippets, we already have <strong>\u201cfont-family: \u2018ETMODULES\u2019;\u201d<\/strong> as the font family, so if you use any of these icons you won\u2019t have to change anything. You can choose any icon you want. Check out these examples of icons available for use:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"935\" height=\"654\" src=\"https:\/\/divicake.com\/wp-content\/uploads\/Elegant-Mosules-Icons.png\" alt=\"In Divi, there's a set of icons that are ready to use right away. This screenshot showcasing a bunch of available icons\" class=\"wp-image-407562\" srcset=\"https:\/\/divicake.com\/wp-content\/uploads\/Elegant-Mosules-Icons.png 935w, https:\/\/divicake.com\/wp-content\/uploads\/Elegant-Mosules-Icons-480x336.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 935px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">ETModules screenshot<\/p>\n\n\n\n<p>Check out this screenshot showcasing a bunch of available icons. Now, the tricky part might be the icon code. But guess what? You can ignore the first bit of the code, the<strong> &amp;#x<\/strong> part. So, for instance, if you like the third icon, all you need is <strong>&#8220;23&#8221;<\/strong> to get that arrow. It&#8217;s a neat little trick to simplify using these icons! Lets understand this from the following screenshot:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"374\" height=\"337\" src=\"https:\/\/divicake.com\/wp-content\/uploads\/code-changing-part.png\" alt=\"A simple trick to simplify using icons by replacing the icon code at the CSS code snippet\" class=\"wp-image-407563\" srcset=\"https:\/\/divicake.com\/wp-content\/uploads\/code-changing-part.png 374w, https:\/\/divicake.com\/wp-content\/uploads\/code-changing-part-300x270.png 300w\" sizes=\"(max-width: 374px) 100vw, 374px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Replacing the the icon code<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Font_Awesome\"><\/span>2. Font Awesome<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Ready for more icon magic? Now, there&#8217;s another set of icons at your disposal, and they come from Font Awesome. If Font Awesome is already integrated in your website, great news \u2013 you&#8217;re all set! But if not, no worries. We&#8217;ve got your back with a tutorial on <a href=\"https:\/\/divicake.com\/blog\/how-to-add-font-awesome-to-divi\/#:~:text=In%20your%20WordPress%20dashboard%2C%20go,use%20within%20your%20Divi%20content.\">How To Add Font Awesome To Divi<\/a>. Let&#8217;s make your website even more awesome with these icons!<\/p>\n\n\n\n<p>If you&#8217;re looking to use a <a href=\"https:\/\/divicake.com\/blog\/replacing-divi-blurb-icon-with-font-awesome-icon\/\">Font Awesome icon<\/a> instead, it&#8217;s pretty easy to switch things up. All you&#8217;ve got to do is tweak a couple of things in the code snippet. First, swap out <strong>&#8220;ETModules&#8221;<\/strong> with <strong>&#8220;Font Awesome 5 Free&#8221;<\/strong> &#8211; that&#8217;s the font family.<\/p>\n\n\n\n<p>Next up, the line with the icon code: instead of <strong>&#8220;23&#8221;<\/strong> (ETModule Code), that you have recently used, you&#8217;ll need to put in the code specific to the<strong> Font Awesome icon<\/strong> you want to use. Just head over to Font Awesome&#8217;s library, pick an icon, and click on it. Then, copy the Unicode they show you. It&#8217;s a simple way to customize your icons with Font Awesome, as shown in the image below:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"503\" src=\"https:\/\/divicake.com\/wp-content\/uploads\/font-awesome-screenshot-1024x503.png\" alt=\"If you're looking to use a Font Awesome icon, it's pretty easy to switch things up. All you've got to do is tweak a couple of things in the CSS code snippet.\" class=\"wp-image-407564\" srcset=\"https:\/\/divicake.com\/wp-content\/uploads\/font-awesome-screenshot-980x481.png 980w, https:\/\/divicake.com\/wp-content\/uploads\/font-awesome-screenshot-480x236.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Font Awesome icon code<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion:<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In summary, this guide empowers you to enhance your Divi menu by adding images and icons. The first step covers incorporating images strategically, turning your menu into a dynamic visual element. Customizable CSS styles further allow you to personalize the appearance.<\/p>\n\n\n\n<p>Moving on to icons, the second step provides CSS code for both main and submenu items, enabling seamless integration. Customization options allow you to add a unique icon to each menu item. Choose between Divi&#8217;s ETModules or Font Awesome for versatile icon selections.<\/p>\n\n\n\n<p>In conclusion, by following these steps, you can transform your Divi menu into a visually appealing and user-friendly navigation feature. Experiment with images, icons, and styles to create a memorable and creative menu that enhances your <a href=\"https:\/\/divicake.com\/blog\/mastering-divi-for-better-web-design\/\">website&#8217;s<\/a> overall user experience. Happy designing!<\/p>\n\n\n\n<p><strong>Read More: <\/strong><a href=\"https:\/\/divicake.com\/blog\/fixing-divi-bugs\/\">Fixing Divi Bugs: Effective Solutions and Troubleshooting<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In the online world, where pictures really count, icons and images are like the superheroes of the web. When we build websites, we know icons and images can show feelings, share info, and just make things look cool. Ever thought about adding icons and images in your Divi menu? Well, this guide is here to [&hellip;]<\/p>\n","protected":false},"author":115375,"featured_media":407565,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[124,127,129],"tags":[392,156,390,391],"_links":{"self":[{"href":"https:\/\/divicake.com\/wp-json\/wp\/v2\/posts\/407548"}],"collection":[{"href":"https:\/\/divicake.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/divicake.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/divicake.com\/wp-json\/wp\/v2\/users\/115375"}],"replies":[{"embeddable":true,"href":"https:\/\/divicake.com\/wp-json\/wp\/v2\/comments?post=407548"}],"version-history":[{"count":4,"href":"https:\/\/divicake.com\/wp-json\/wp\/v2\/posts\/407548\/revisions"}],"predecessor-version":[{"id":409741,"href":"https:\/\/divicake.com\/wp-json\/wp\/v2\/posts\/407548\/revisions\/409741"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/divicake.com\/wp-json\/wp\/v2\/media\/407565"}],"wp:attachment":[{"href":"https:\/\/divicake.com\/wp-json\/wp\/v2\/media?parent=407548"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/divicake.com\/wp-json\/wp\/v2\/categories?post=407548"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/divicake.com\/wp-json\/wp\/v2\/tags?post=407548"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}