At this point we have quite a lot of Divi menu tutorials, and I know many of you are thrilled about that. We still have more in our series on the Menu module, but the cool part about the tutorial today is that we made the code work with both the default Divi menu and the Menu module. I have been wanting to show you how to add icons to the Divi menu, and I’m finally get to it!
Icons are a nice way to add a lot of interest to your menu. The right icon will give the use that sublte indication of what the link is about, but they also look really. I’ll also throw in a bonus at the end and show you how to achieve a cool hover effect!
Add Icons To The Divi Main Menu Links
The first snippet here will apply to the top-level menu items. Again, this will work with the default Divi module or it will work in the Theme Builder or anywhere else using the Menu module. After we copy and paste the code, we can talk more about customizing it like replacing the icon or colors.
If you are not sure where to add the code, check out our tutorial called Where To Add Custom Code In Divi. The short answer is to copy the code snippet and add it in Divi>Theme Options>Custom CSS box.
/*add icon to Divi main menu items*/
nav li a:before {
font-family: 'ETMODULES';
content: '\24';
text-align: center;
vertical-align: middle;
margin-right: 10px;
margin-left: -10px;
color: #2cba6c;
font-size: 1em;
transition: all .3s ease;
}
Add Icons To The Divi Menu Submenu Dropdown Links
This second snippet applies the icon to the submu links. So this will add an icon to the Divi menu dropdown items in the Menu module or in the default menu. The same process applies here, just copy the code and paste it in the Divi>Theme Options>Custom CSS box.
/*add icon to Divi submenu items*/
nav li li a:before {
font-family: 'ETMODULES';
content: '\24';
text-align: center;
vertical-align: middle;
margin-right: 10px;
margin-left: -10px;
color: #2cba6c;
font-size: 1em;
transition: all .3s ease;
}
Different Icons For Different Menu Links
So far, the snippets above would apply the same icon to all the main menu or submenu links. That might be fine for you, and it works great on my site, but you can also set a different icon for each of the menu items. All we have to do is add a new CSS class for each menu item.
Here’s an example of adding a custom class to a menu item.
And here is how we would target that menu item. We want to add a cart icon, so we add “e015” to the CSS snippet (see step below for more information about this).
There are several great choices for icons to add to your Divi menu Module. I’m going to talk about two in this tutorial, since the one set is built-in to Divi and the other is easily integrated.
1. ETModules
The first set of icons you can use are the one that come built-in to Divi by default and require no other steps to activate. All you have to do is choose an icon and then add that to the CSS snippet that I will give. You can learn more about these icons on the Elegant Themes blog post here. You will need to reference this to get the icon codes.
In the code snippets, we already have “font-family: ‘ETMODULES’;” as the font family, so if you any of these icons you won’t have to change anything.
You can choose any icon you want.
This is just screenshot of some of the icons available. The part that can be confusing here is the icon code. You don’t actually need the first part of the code, so you can disregard the &#x part of it. So for the fourth one here you can see we only used “24” to get the arrow.
2. Font Awesome
The second set of icons you can use is Font Awesome. If you already have Font Awesome integrated with your website then you are good to go. Otherwise, check out our tutorial on How To Add Font Awesome To Divi.
To use a Font Awesome icon, you will need to replace the font family in the snippets. But don’t worry, it’s very easy. Just change the “ETModules” to “Font Awesome 5 Free.”
The next line in the CSS is the icon code. You can replace the “24” with the icon code from Font Awesome. Simply go search their icon library and click on an icon. Then, copy the Unicode as shown in the image below.
In this example, the icon Unicode is “f102,” so all we have to do is add this to the CSS snippet like “content: “\f102″;” and the icon will appear.
Adding Cool Hover Effects To The Divi Menu Icons
Now that we have pasted the snippets into our website and selected the icons, let’s customize the icons a little. On our site here, we have two things happen when you hover over the submenu items. The icon changes color, and the icon and link move to the right. Here’s a snippet you can add to achieve this:
/*change color and position of submenu icon on hover*/
nav li ul li a:hover:before {
margin-left: -7px;
color: #e03574 !important;
transition: all .3s ease;
}
I hope you have enjoyed learning How To Add Icons To The Divi Menu. Please share your thoughts in the comments below. If you find value in this type of post, please subscribe because we have tons of tutorials in progress to be posted!
Subscribe
Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)
Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.
This worked great on my header navigation menu! Just what I was looking for because I wanted the icons next to the link to respond the same way as the link (hover, and clicking)…
BUT I can’t get it to work on the mobile drop down menu… tried messing around with the code in every way possible… either I can get the icon to respond with the link BUT the customizations for the appearance of the icon are gone/not being used. OR the old way where the icon appearance is customized but the icon isn’t clickable or it doesn’t have the same hover settings as the menu link.
Is there anyway to get this to work on the mobile menu???? I know these instructions are for a menu on a page and not for navigation… BUT I’ve been searching all over the internet for days AND this is all I’ve found that has worked at all… funny enough after all my long searches, I always find the answers from your site
Nevermind… finally figured this out with the select element… works! Thanks for this post… literally spent 2 days finding how to make the pseudo element a part of the parent element so you can click on it and make the hover respond the same way and all I needed was to add the letter ‘a’ in front of :before … this was the only article that event mentioned this
This is great – thank you so much. I wonder if it would be possible to include an icon above the menu link to get this kind of effect: https://jimmysfarm.com/
I was wondering, how you can show just the icon without the label in Divi’s classic primary menu?
Also, with the latest Divi update new icons have been integrated. But I could not find a blog which features the code for all the new icons added to Divi. Any ideas?
The Divi icons show up when we use a font family ETMODULES but that font family can be applied to the Divi Builder header and not on the default one. So to add the icons to the menu you can set up Font Awesome on the website(whose guide is available) and then you can place the icon code before the Menu item name in WordPress Dashboard > Appearance > Menus and by doing that you will have a lot of icon options and you can display the icons in the menu successfully.
Hi Nelson, incredible tutorial! it was so cool, but i need some help with it, recently i added some icons to my menu like the tutorial said, but, my icons look like other icon than that i really put 🙁 its more like this ” 7 home – (insert here another random icon that obviously im not put it there) know how – 8 contact ” i cant find any idea of whats the problem, i hope you can help whit it 🙂
I loved the tutorial!
But unfortunately the icons are not working on my website neither with ETModules nor with Font Awesome 5 Free.
The problem is that it shows it in the visual builder but not in the front end of the web. I do not know what is happening since I did everything the same as in the tutorial, is it a plugin or something like that? If you have any solution I would be grateful, likewise if you could see if it still works it would be great!
In this tutorial i will show you how to fix the random HTML issue in the Visual tab of the Divi text editor.
Pin It on Pinterest
{"id":null,"mode":"button","open_style":"in_modal","currency_code":"USD","currency_symbol":"$","currency_type":"decimal","blank_flag_url":"https:\/\/www.peeayecreative.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/blank.gif","flag_sprite_url":"https:\/\/www.peeayecreative.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/flags.png","default_amount":500,"top_media_type":"none","featured_image_url":false,"featured_embed":"","header_media":null,"file_download_attachment_data":null,"recurring_options_enabled":true,"recurring_options":{"never":{"selected":true,"after_output":"One time only"},"weekly":{"selected":false,"after_output":"Every week"},"monthly":{"selected":false,"after_output":"Every month"},"yearly":{"selected":false,"after_output":"Every year"}},"strings":{"current_user_email":"","current_user_name":"","link_text":"Leave a tip","complete_payment_button_error_text":"Check info and try again","payment_verb":"Pay","payment_request_label":"Pee-Aye Creative","form_has_an_error":"Please check and fix the errors above","general_server_error":"Something isn't working right at the moment. Please try again.","form_title":"Pee-Aye Creative","form_subtitle":null,"currency_search_text":"Country or Currency here","other_payment_option":"Other payment option","manage_payments_button_text":"Manage your payments","thank_you_message":"Thank you for being a supporter! It is people like you who keep us going week after week!","payment_confirmation_title":"Pee-Aye Creative","receipt_title":"Your Receipt","print_receipt":"Print Receipt","email_receipt":"Email Receipt","email_receipt_sending":"Sending receipt...","email_receipt_success":"Email receipt successfully sent","email_receipt_failed":"Email receipt failed to send. Please try again.","receipt_payee":"Paid to","receipt_statement_descriptor":"This will show up on your statement as","receipt_date":"Date","receipt_transaction_id":"Transaction ID","receipt_transaction_amount":"Amount","refund_payer":"Refund from","login":"Log in to manage your payments","manage_payments":"Manage Payments","transactions_title":"Your Transactions","transaction_title":"Transaction Receipt","transaction_period":"Plan Period","arrangements_title":"Your Plans","arrangement_title":"Manage Plan","arrangement_details":"Plan Details","arrangement_id_title":"Plan ID","arrangement_payment_method_title":"Payment Method","arrangement_amount_title":"Plan Amount","arrangement_renewal_title":"Next renewal date","arrangement_action_cancel":"Cancel Plan","arrangement_action_cant_cancel":"Cancelling is currently not available.","arrangement_action_cancel_double":"Are you sure you'd like to cancel?","arrangement_cancelling":"Cancelling Plan...","arrangement_cancelled":"Plan Cancelled","arrangement_failed_to_cancel":"Failed to cancel plan","back_to_plans":"\u2190 Back to Plans","update_payment_method_verb":"Update","sca_auth_description":"Your have a pending renewal payment which requires authorization.","sca_auth_verb":"Authorize renewal payment","sca_authing_verb":"Authorizing payment","sca_authed_verb":"Payment successfully authorized!","sca_auth_failed":"Unable to authorize! Please try again.","login_button_text":"Log in","login_form_has_an_error":"Please check and fix the errors above","uppercase_search":"Search","lowercase_search":"search","uppercase_page":"Page","lowercase_page":"page","uppercase_items":"Items","lowercase_items":"items","uppercase_per":"Per","lowercase_per":"per","uppercase_of":"Of","lowercase_of":"of","back":"Back to plans","zip_code_placeholder":"Zip\/Postal Code","download_file_button_text":"Download File","input_field_instructions":{"tip_amount":{"placeholder_text":"How much would you like to tip?","initial":{"instruction_type":"normal","instruction_message":"How much would you like to tip? Choose any currency."},"empty":{"instruction_type":"error","instruction_message":"How much would you like to tip? Choose any currency."},"invalid_curency":{"instruction_type":"error","instruction_message":"Please choose a valid currency."}},"recurring":{"placeholder_text":"Recurring","initial":{"instruction_type":"normal","instruction_message":"How often would you like to give this?"},"success":{"instruction_type":"success","instruction_message":"How often would you like to give this?"},"empty":{"instruction_type":"error","instruction_message":"How often would you like to give this?"}},"name":{"placeholder_text":"Name on Credit Card","initial":{"instruction_type":"normal","instruction_message":"Enter the name on your card."},"success":{"instruction_type":"success","instruction_message":"Enter the name on your card."},"empty":{"instruction_type":"error","instruction_message":"Please enter the name on your card."}},"privacy_policy":{"terms_title":"Terms and conditions","terms_body":null,"terms_show_text":"View Terms","terms_hide_text":"Hide Terms","initial":{"instruction_type":"normal","instruction_message":"I agree to the terms."},"unchecked":{"instruction_type":"error","instruction_message":"Please agree to the terms."},"checked":{"instruction_type":"success","instruction_message":"I agree to the terms."}},"email":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email address"},"success":{"instruction_type":"success","instruction_message":"Enter your email address"},"blank":{"instruction_type":"error","instruction_message":"Enter your email address"},"not_an_email_address":{"instruction_type":"error","instruction_message":"Make sure you have entered a valid email address"}},"note_with_tip":{"placeholder_text":"Your note here...","initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"empty":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"not_empty_initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"saving":{"instruction_type":"normal","instruction_message":"Saving note..."},"success":{"instruction_type":"success","instruction_message":"Note successfully saved!"},"error":{"instruction_type":"error","instruction_message":"Unable to save note note at this time. Please try again."}},"email_for_login_code":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email to log in."},"success":{"instruction_type":"success","instruction_message":"Enter your email to log in."},"blank":{"instruction_type":"error","instruction_message":"Enter your email to log in."},"empty":{"instruction_type":"error","instruction_message":"Enter your email to log in."}},"login_code":{"initial":{"instruction_type":"normal","instruction_message":"Check your email and enter the login code."},"success":{"instruction_type":"success","instruction_message":"Check your email and enter the login code."},"blank":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."},"empty":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."}},"stripe_all_in_one":{"initial":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"empty":{"instruction_type":"error","instruction_message":"Enter your credit card details here."},"success":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"invalid_number":{"instruction_type":"error","instruction_message":"The card number is not a valid credit card number."},"invalid_expiry_month":{"instruction_type":"error","instruction_message":"The card's expiration month is invalid."},"invalid_expiry_year":{"instruction_type":"error","instruction_message":"The card's expiration year is invalid."},"invalid_cvc":{"instruction_type":"error","instruction_message":"The card's security code is invalid."},"incorrect_number":{"instruction_type":"error","instruction_message":"The card number is incorrect."},"incomplete_number":{"instruction_type":"error","instruction_message":"The card number is incomplete."},"incomplete_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incomplete."},"incomplete_expiry":{"instruction_type":"error","instruction_message":"The card's expiration date is incomplete."},"incomplete_zip":{"instruction_type":"error","instruction_message":"The card's zip code is incomplete."},"expired_card":{"instruction_type":"error","instruction_message":"The card has expired."},"incorrect_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incorrect."},"incorrect_zip":{"instruction_type":"error","instruction_message":"The card's zip code failed validation."},"invalid_expiry_year_past":{"instruction_type":"error","instruction_message":"The card's expiration year is in the past"},"card_declined":{"instruction_type":"error","instruction_message":"The card was declined."},"missing":{"instruction_type":"error","instruction_message":"There is no card on a customer that is being charged."},"processing_error":{"instruction_type":"error","instruction_message":"An error occurred while processing the card."},"invalid_request_error":{"instruction_type":"error","instruction_message":"Unable to process this payment, please try again or use alternative method."},"invalid_sofort_country":{"instruction_type":"error","instruction_message":"The billing country is not accepted by SOFORT. Please try another country."}}}},"fetched_oembed_html":false}
One more question,would you let me know how to add a custom icon on the submenu?
Hi Jeremy,
That is what this tutorial is about 🙂
What CSS would I use to add an icon to the right of a fullscreen menu item on hover?
This worked great on my header navigation menu! Just what I was looking for because I wanted the icons next to the link to respond the same way as the link (hover, and clicking)…
BUT I can’t get it to work on the mobile drop down menu… tried messing around with the code in every way possible… either I can get the icon to respond with the link BUT the customizations for the appearance of the icon are gone/not being used. OR the old way where the icon appearance is customized but the icon isn’t clickable or it doesn’t have the same hover settings as the menu link.
Is there anyway to get this to work on the mobile menu???? I know these instructions are for a menu on a page and not for navigation… BUT I’ve been searching all over the internet for days AND this is all I’ve found that has worked at all… funny enough after all my long searches, I always find the answers from your site
Nevermind… finally figured this out with the select element… works! Thanks for this post… literally spent 2 days finding how to make the pseudo element a part of the parent element so you can click on it and make the hover respond the same way and all I needed was to add the letter ‘a’ in front of :before … this was the only article that event mentioned this
Hi Streater,
So glad to hear you got it sorted out! I am happy you are finding and enjoying the content here on my blog! 🙂
This is great – thank you so much. I wonder if it would be possible to include an icon above the menu link to get this kind of effect: https://jimmysfarm.com/
Would you use a similar technique?
Hi Vicky,
Yes I think a very similar process, but would need the icon to be display: block; for sure. Would be a good one to try.
Hi there ! thanks for the tuto.
I feel like “Font Awesome 5 Free.” or even “Font Awesome\ 5 Free” etc. are not recognized.
.menu-login > a:before {
font-family: ‘Font Awesome 5 Free’;
content: “\f102″;
text-align: center;
vertical-align: middle;
margin-right: 10px;
margin-left: -10px;
color: #2cba6c;
font-size: 1em;
transition: all .3s ease;
}
Sure, so this question is more related to Font Awesome, but I can suggest adding font-weight: 900; and that should help.
Another great tutorial Nelson, thanks. Has the new divi icon updates changed the way this works at all?
You’re welcome. I don’t think so, not that I’m aware of.
Great tutorial. Thank you. Two quick questions:
I was wondering, how you can show just the icon without the label in Divi’s classic primary menu?
Also, with the latest Divi update new icons have been integrated. But I could not find a blog which features the code for all the new icons added to Divi. Any ideas?
Thanks,
Cheers,
Walter
Hey Walter,
The Divi icons show up when we use a font family ETMODULES but that font family can be applied to the Divi Builder header and not on the default one. So to add the icons to the menu you can set up Font Awesome on the website(whose guide is available) and then you can place the icon code before the Menu item name in WordPress Dashboard > Appearance > Menus and by doing that you will have a lot of icon options and you can display the icons in the menu successfully.
Let me know how it goes.
I’m getting two arrow icons now showing up after I create a child theme instance. Even after deleting the child theme, they are remaining. Any advice?
Hi Tim, we would need to know what code you are using to add the icons.
Hi,
Thank you for the great tuto.
I use the “nav li ul li a:hover:before” to change color and position of submenu icon on hover as you mentioned. It works fine!
But how I can apply the same value on the icons when the menu item is active?
Thank you for your help.
Hey Marcoduv,
Could you please share the URL of the page for me to investigate it further for you?
Hi Nelson, incredible tutorial! it was so cool, but i need some help with it, recently i added some icons to my menu like the tutorial said, but, my icons look like other icon than that i really put 🙁 its more like this ” 7 home – (insert here another random icon that obviously im not put it there) know how – 8 contact ” i cant find any idea of whats the problem, i hope you can help whit it 🙂
Cheers!”
Hi Chris
Could you let me know what code you’re using for adding the icons?
Of course, the code is:
.pa-menu-inicio > a:before {
font-family: ‘ETMODULES’;
content: ‘\e0d5’;
text-align: center;
vertical-align: middle;
margin-right: 10px;
margin-left: -10px;
color: #6B4400;
font-size: 1em;
font-weight: 900;
transition: all .3s ease;
}
I loved the tutorial!
But unfortunately the icons are not working on my website neither with ETModules nor with Font Awesome 5 Free.
The problem is that it shows it in the visual builder but not in the front end of the web. I do not know what is happening since I did everything the same as in the tutorial, is it a plugin or something like that? If you have any solution I would be grateful, likewise if you could see if it still works it would be great!
Turn off Dynamic Icons, it’s an issue with Divi.