In order to be able to use the Font Awesome Social Icons on Divi, first we need to load the Font-Awesome files to Divi.
1. Head over to the Font Awesome starting page and grab the piece of code offered there which looks like this:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
2. Paste that code into Divi ➤ Theme Options ➤ Integration tab ➤ Add code to the < head > of your blog:
3. Now it's time to pick up the first social icon to be added as part of Divi Navigation menu by checking this link.
Use the built-in search functionality to look for the icon you want to add, let's take for example the instagram icon:
4. Click on the resulting icon to get more information and copy the HTML code for the instagram icon, marked in the below screenshot:
5. Once you have the HTML code of the icon, go back to your WordPress Dashboard > Appearance > Menus and choose the menu that was set to be your Primary Menu.
6. Add a Custom Link to the Primary menu using the Custom Links option:
7. For the URL field enter your Instagram profile URL.
8. For the Link Text field paste the HTML code copied from the Font Awesome website (step 4) and click to Add to Menu.
9. Save the Menu.
Checking the front end of the website:
For more information also check the our blog article: How to Add Social Icons to Divi’s Primary Menu.