Disclaimer: This tutorial contains affiliate links, which means that if you click on one of the product links and purchase the product I am recommending to you, I’ll receive a small commission which inadvertently is invested back into free tutorials such as this one. Thank you for your support. 
Add social media icons to your website.
Add social media icons to your website.

FOLLOW THESE STEPS TO ADD SOCIAL MEDIA ICONS TO YOUR PRIMARY MENU BAR ON YOUR WORDPRESS WEBSITE.

1. Install Font Awesome into Your WordPress website using CSS.

If you’re using the Divi Theme, go to your WordPress Dashbord, then select Divi, then Theme Options, then Integration.

In the Code Integration tab, scroll down to the section where it says ‘Add code to the <head> of your blog.’ Then add this code:

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css” />

Then click Save Changes.

If you aren’t using the Divi theme, you’ll need to add the code manually into the <head> of your .html file for your website.

2. The next step is to add the Social Media Icons to your Primary Menu Bar.

Go back to your WordPress Dashboard and click on Appearance, then Menus.

Select Main Menu (Primary Menu), then click Select.

3. In the left column, click on the dropdown arrow next to Custom Links.
You will see two fields, one URL and one for the Link Text.

4. Go to the Font Awesome Website: http://fontawesome.io/.

Click on Icons, then run a search for Instagram (or your preferred social media platform).
In the search results, click on the social media icon that you searched for.
In this tutorial, we ran a search for Instagram.

5. The Instagram icon will pop up. Scroll down and copy the <i> code that looks like this:

<i class=”fa fa-instagram” aria-hidden=”true”></i>

6. Then go back to the Custom Links box on your Primary Menu on your WordPress Dashboard and paste that <i> code into the Link Text field.

7. Then paste the link to your Social Media Page, for example: https://www.instagram.com/administrie, in the URL field.

It should look like this:

8. Click ‘Add to Menu‘.

9. You should now see the custom link in the right column of your menu page and it will look like this:

10. On the Custom Link box, click on the drop down arrow, then tick the box where it says ‘Open Link in a New Tab‘ like this:

11. Then click on the ‘Save Menu‘ button on your menu page.

This will add your social media icon after your pages on your primary menu bar and when clicked, it will open your social media page in a new tab. If you want to display the social media links before your pages, or in the centre of your primary menu bar, just rearrange the items on your primary menu.

Repeat these steps to add all your preferred social media icons on your menu bar.

Add social media icons to your website.
Add social media icons to your website.

FOLLOW THESE STEPS TO ADD SOCIAL MEDIA ICONS TO YOUR PRIMARY MENU BAR ON YOUR WORDPRESS WEBSITE.

1. Install Font Awesome into Your WordPress website using CSS.

If you’re using the Divi Theme, go to your WordPress Dashbord, then select Divi, then Theme Options, then Integration.

In the Code Integration tab, scroll down to the section where it says ‘Add code to the <head> of your blog.’ Then add this code:

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css” />

Then click Save Changes.

If you aren’t using the Divi theme, you’ll need to add the code manually into the <head> of your .html file for your website.

2. The next step is to add the Social Media Icons to your Primary Menu Bar.

Go back to your WordPress Dashboard and click on Appearance, then Menus.

Select Main Menu (Primary Menu), then click Select.

3. In the left column, click on the dropdown arrow next to Custom Links.
You will see two fields, one URL and one for the Link Text.

4. Go to the Font Awesome Website: http://fontawesome.io/.

Click on Icons, then run a search for Instagram (or your preferred social media platform).
In the search results, click on the social media icon that you searched for.
In this tutorial, we ran a search for Instagram.

5. The Instagram icon will pop up. Scroll down and copy the <i> code that looks like this:

<i class=”fa fa-instagram” aria-hidden=”true”></i>

6. Then go back to the Custom Links box on your Primary Menu on your WordPress Dashboard and paste that <i> code into the Link Text field.

7. Then paste the link to your Social Media Page, for example: https://www.instagram.com/administrie, in the URL field.

It should look like this:

8. Click ‘Add to Menu‘.

9. You should now see the custom link in the right column of your menu page and it will look like this:

10. On the Custom Link box, click on the drop down arrow, then tick the box where it says ‘Open Link in a New Tab‘ like this:

11. Then click on the ‘Save Menu‘ button on your menu page.

This will add your social media icon after your pages on your primary menu bar and when clicked, it will open your social media page in a new tab. If you want to display the social media links before your pages, or in the centre of your primary menu bar, just rearrange the items on your primary menu.

Repeat these steps to add all your preferred social media icons on your menu bar.

Pin It on Pinterest