(updated Aug. 2, 2023)
To be able to use the Font Awesome Social Icons on Divi, first, we need to load the Font Awesome files to Divi.
To do so, we need to create a Font Awesome Kit.
Step 1. Create an Awesome Font Kit
Header over to fontawesome.com and click on Start for Free button:
On the next page, enter your email address where the details will be sent. Make sure you are using an email address to which you have access:
Once a valid email address has been filled in the form, you will be prompted with a Check your Email Message:
Once the link that you've got in the email has been clicked on, it will ask you for a few basic details such as Password, first name, last name, etc. Make sure all the details are filled in.
After all the details have been filled in, you will end up on a Quick Set up For the Web page.
On that page, the option to use the Javascript Embed Code:
Copy the code and paste it to Divi > Theme Option > Integration tab > Header:
Step 2. Add FontAwesome icons to Menu
Use the built-in search functionality to find 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 website 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.
Check the front end of the website:
For more information, also check our blog article: How to Add Social Icons to Divi’s Primary Menu.