How to Add Social Icons in the Divi Header

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.