Enhancing your website's primary menu with Font Awesome social icons can improve user engagement and streamline access to your social media profiles.
In this article, we will guide you through the process of adding Font Awesome social icons to Divi's primary menu.
To be able to use custom icons from Font Awesome, you will need to:
Create a Font Awesome Kit
Add the actual icon's code as Menu items
Create a FontAwesome Font Kit
Header over to Font Awesome and click on the 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:
Check your Email to verify your address
Complete the registration process, following the details from your email
On the Setup page, click on the Copy icon to copy the script to your clipboard
Paste the script tag into Divi → Theme Option → Integration tab → Header
Add FontAwesome icons to the WordPress Menu
Use the search functionality to find the icon you want to add. Let's take, for example, the Instagram icon:
Click on the resulting icon to get more information and copy the HTML code for the Instagram icon, marked in the screenshot below:
Go to WordPress Dashboard → Appearance → Menus and edit your current WordPress Menu
Add a Custom Link to the Primary menu using the Custom Links option
Enter your Instagram profile URL in the URL field
Paste the HTML code copied in Step 2 in the Link Text field
Click on the Save Menu button to save your changes
The result on the front end is shown in the screenshot below.
For more information, check our blog article: How to Add Social Icons to Divi’s Primary Menu.