Add Custom Social Media Icon to the Divi Menu

✅ 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

Transcript:

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!