Add Custom Social Media Icon to the Divi Menu

Last modified Oct 9, 2019
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

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! 

HTML

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

 

CSS

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

 

Your Comments

Submit a Comment

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

Receive notifications about our new blog posts.

Before You Start

Build a Child Theme

Child themes are incredibly important for the overall look, feel, and navigation of your website, so we encourage you to take the time to get to know the content. This will help your web design and development processes tremendously. That’s why we’ve made it super easy to build a child theme for Divi or Extra in seconds!

Generate Child Theme

How to Add Java Script and jQuery to Divi

There are four ways you can add JavaScript or jQuery to a Divi website: use the code module, the Divi Theme Options console, enqueue scripts using the functions.php file, or using a plugin.

Read More

How to Add CSS to Divi

Divi users can choose between five different methods to add custom CSS to their websites. Read more about these various methods you can use to add custom CSS to your Divi theme, as well as better understand the pros and cons of each method.

Read More