In this tutorial, we will be covering how you can add social icons in the Divi header such as Facebook, Twitter, or Instagram into Divi. I will show you two placements for social icons. The first will be on the menu and the second will be with a custom header design.
Here you see a demo with the social icons in the menu
And this is the demo for social icons in a custom header
Adding social icons in the menu
We start with adding the social icons to your menu. We will be using Font Awesome and some CSS to do this.
Step 1: Adding Font Awesome icon kit
For this, we are going to add Font Awesome icon kit too Divi. With this, we have access to thousands of icons.
First, we need to add the Font Awesome toolkit to our site with 1 line of code.
Go to the Font Awesome website right here: https://fontawesome.com/start
Fill in your email and confirm this, you will be redirected to a page with the code. Copy this code and paste it in Divi > Theme Options > Integration > Add code to the < head > of your blog
Step 2: Adding social icons in the menu
Go to Appearance > Menus
If you don’t have a menu yet then you can create one first and set it as your primary menu. Use the custom links option to create a social icon.
In the URL field, you fill in the link to your social platform. I have filled in # what means a dummy link. In the link text field, you fill in the code of the social icon. You can get this code from the website of Font Awesome.
Go to there website and fill in the search field what icon you are looking for, in this case, I’m looking for Facebook. You will get a list of icons and choose the one you want. Then you can copy the code.
After you added the social icon to your menu you need to add a class for the social icon so we can style it in the next step
Place the following class in the CSS classes field, in case you don’t see this field then go to the top right corner of your screen and click on-screen options and check CSS classes
Place this CSS social_icons
Step 3: Styling the social icons
Go to Divi > Theme Options and place the following CSS:
li.social_icons {
padding-right: 5px !important;
}
.fa-facebook-square {
font-size: 34px;
color: #426aaf;
}
.fa-twitter-square {
font-size: 34px;
color: #1da1f2;
}
.fa-google-plus-square {
font-size: 34px;
color: #d84937;
}
The first snippet of the CSS (padding-right) is for the distance between the social icons. You can change this value for more or less space.
For this tutorial, I use 3 social icons, Facebook, Twitter and Google plus. You can find each CSS snippet above. If you use different icons you need to change the CSS class. You can find the CSS class in the social icon code that you copy/paste in the previous step. You can change the font size and color of your social icons.
Social icons in a custom header
If you want to have more control about the placement of the social icons, I recommend making a custom Divi header. You can follow this tutorial on how to make a custom Divi header. With a custom header, you can use the social module and place this in any location in the header.
As you can see in the demo, I have also icons in front of the menu items. In my tutorial How to add icons in your Divi menu, I explain how I did this.
Thank you!