Add Custom Social Media Icon to the Divi Menu

Last modified Sep 10, 2020
Difficulty Intermediate
Language CSS

Watch Tutorial

Embed font awesome icons to Divi
Divi Icon Party
Add custom social media icons to the divi secondary menu and the divi footer
Become a Member


Hey everybody, David here from Divi Space.  Social media engagement is a major factor in the success of your website which is why links are usually placed close to the header. You can easily add social media icons to your Divi menu! Today I’ll show you two ways to put them in your primary menu. In the next tutorial, I will add custom social media icons to the divi secondary menu and the divi footer.

Okay! To accomplish this, you need to have font awesome icons embedded. If you haven’t done that yet, follow the link in the description and come back when you’re ready.

Alright, go to Appearance and Menus in your WordPress dashboard. Create a new menu item in the primary menu and be sure to select the custom link option. Let’s say you love computer games as much as I do and you want to add a Twitch platform.  Here is where you will paste the URL to your Twitch profile.

Go to the font awesome website and search for the twitch code and copy the HTML code. Paste the code to the  Link Text box. (<i class=”fab fa-twitch”></i>)

Click add to the menu. Refresh the page and it’s ready. Looks great! You can also stylize the icon with additional CSS. Style it as fonts and by default, it takes styles from the theme customizer -> heading and navigation -> primary menu bar

If you want to add something custom,  you need to use a custom CSS class, for example, ds-menu-icon, to the i tag.

And additional CSS code. Always remember to match your current design and brand identity. The alternative way to add social media icons to the primary menu is installing the Divi Icon Party Plugin. This plugin gives you way more social icons and comes already integrated with font awesome.

Once your plugin is installed and activated, you can head to Divi theme options and under the general tab you’ll now see that instead of just the standard Facebook Twitter Google+ and RSS icon fields there are fields for additional over 30 socials like Instagram Twitch Skype Snapchat Slack and more. I’m going to activate a few of these and enable the setting to include those icons in the main header then I’m going to Save Changes.

If I now refresh the page, you can see that alongside these standard social icons that come with Divi we now have the new ones and they are in the primary menu and the footer.  With the Divi icon party plugin it’s super easy to do you just enable the option!

You can get the Divi Icon Party plugin as a standalone purchase or by becoming a Divi Space Annual or Lifetime Member! I’m David Blackmon and this concludes this  Divi Space Snippet Series, thanks for watching!  See you next time!


<i class="fab fa-twitch"></i>



.ds-menu-icon {
font-size: 18px;
color: #6441a4;


Does this snippet (still) work?

Please let us know if everything worked as expected. If you think this code saved you time, we will be happy to receive a comment! :)

Subscribe to our youtube channel because there’s more to come!

Your Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Receive notifications about our new blog posts.

Next snippet Open Social Links in New Tab
Previous snippet Embed Material Design Icons to Divi