Here is a cool way to add your own cool social media icons or any type of icon in the top header of your Divi website using Font Awesome, CSS and a little Divi Wizardry.
The first thing you will need to do is add the code needed to start using font awesome icons on your website.
1. Go to your Divi Theme Options and once in the epanel select Integration
2. Paste the following code into the first section that says “Add code to the < head > of your blog”
Now you are ready to start using Font Awesome on your website.
Setting Up The Custom Menu
1. Go to Appearance>Menu and then create a new menu called Secondary Menu. Be sure to tick the option in the Menu Setting to make it your official Secondary Menu.
2. In the upper right hand corner of the screen is a tab that says “Screen Options” Click on that to bring down the options and tick the CSS Classes box
3. Under the “Custom Links” option is where we will begin adding our links. Select the option and add your url. In this case it’s my Facebook page url
4. Next you will need to grab the code for your font icon. Head on over to Font Awesome to see their library of 585 icons and growing. Once you find the icon you want, select it and it will take you to the page where you can copy and paste the code.
Here are some of the common links for quick reference.
5. Now that have the codes you want, you will add it to the “Link Text” in the Custom Link and then select add to menu. Repeat these steps for all the links you want to have in your top header using an icon only.
6. Once you have all the menu items added, you will have to go through each one and add a CSS Class. For example facebook-menu, twitter-menu, pinterest-menu, etc…
Now we just need to make sure the top header is enabled.