Add Social Media Icons to your menu in WordPress

Social Media platforms are extremely valuable tools in helping you grow your business and quite frequently you’ll want to add social media icons to your menu.

But being able to add social media icons to your menu is not default functionality in WordPress.

Let us show you exactly how easy it is to do this.

Here’s the final result we’ll be producing in this tutorial and something you can achieve in as little as two easy steps.

Add social media icons to your menu to achieve a result like this.

Step 1: Go to Font Awesome and get the code of the icon you want to add to your menu

In this tutorial we’re going to show you how to add an Instagram icon to your menu but you can apply this same technique to add any Font Awesome icon you’d like.

Firstly, you need to get the code for the Font Awesome icon you’re wanting to add into the menu on your website.

To do this, go to and scroll down until you find the icon you’re wanting to use.

TIP! Use the Search box on the Font Awesome website to search through the icons available with Font Awesome. For example, let’s say you’re wanting to add the Instagram icon to your menu. Go to and type Instagram into the search box on the Font Awesome website, as per the below animation.


Next, click on the Instagram Icon that shows in the search results to go to the page which details the Instagram icon.

You should see a page similar to the below.

Each icon in Font Awesome has its own page. On this page you can find the information about the icon you’re wanting to add to your website.

In the image below we’ve used our mouse to highlight <i class=”fa fa-instagram” aria-hidden=”true”></i> and copy it to our clipboard.

The part highlighted below is what you’ll be adding into your WordPress menu to add the Instagram social media icon to your menu.


Step 2: Add the Font Awesome code of the Instagram icon to your menu

This is what the menu looks like currently on the front end of our website before we add the Instagram icon.


Let’s add our Instagram icon to the menu!

To do this, go to your WordPress Dashboard > Appearance > Menus and edit the menu you’d like to add the Instagram icon to.

Below is what ours currently looks like.


Now, on this edit menu screen pictured above, click on Custom Link on the left, type in the URL of your Instagram page in the URL field, and in the Link Text add the Font Awesome code for the Instagram Icon that we copied to our clipboard at the end of Step 1.

Below is what you should have (your URL will be different, of course).


Next, click the Add to Menu button to add the link to the menu.


And then click the blue Save Menu button.


Preview your website and you’ll now have the Instagram icon showing in your menu, like the below.

After adding our Font Awesome code into our menu item it now appears in the Header menu on our website as shown here.

And you can add as many social media icons to your menu as you like!

Below we’ve added a couple of other ones in just the same way.

As you can see, we’ve added Instagram, Facebook AND twitter into the same menu just like we did previously with the Instagram icon.

Repeat the steps shown in this tutorial to add multiple social media icons to your menu
Finally, we you can add multiple social media icons to your menu to produce a menu that links to your website pages AND your social media pages.

On mobile, the icons also show in the menu, just like below.

Add social media icons to your menu on mobile devices

Things to consider when you add social media icons to your menu

You can use this technique on any menus in WordPress. For example, you can use this on the Top Menu if you are using the Beaver Builder Theme to do something like the below.

You can add social media icons to any menu in WordPress with this technique. For example, like the Top Bar menu here that is available in the Beaver Builder Theme.
You can add social media icons to any menu in WordPress with this technique. For example, like the Top Bar menu here that is available in the Beaver Builder Theme.

The Top Menu is a great choice for the Beaver Builder Theme as they remain visible on mobile devices and aren’t hidden within the menu.

This is shown below. If you take this below screenshot where we’ve added the social media icons to the Top Menu and compare it to the screenshot above where we added the social media icons to the header menu, you can see that the social media icons are shown by default below, whereas with the header menu you must click Menu for them to show.

The social media icons are shown by default on mobile devices if you add them to the Top Menu with the Beaver Builder Theme.

Wrapping it up

Social Media icons are an extremely useful way to help you and your clients promote their businesses and this method you’ve just learnt is an extremely easy way to add them to your menus.

Also, sometimes your website header can look a bit bland and adding social media icons to your menu up top can be an easy way to add some complexity to the header design and make it more appealing.

Comment below

Don’t forget to comment below and show us where you use this.

Also, ask us questions in the comments below if you need any help implementing this to your website.

Hey! I'm Grant Ambrose,

My WordPress website generates millions of dollars in sales each year and I put together this website to help you do the same

I believe that a lot of the time, we aren't doing things that will help our business NOT because we don't know how to do it, but rather we don't even know it is possible. My website aims to change this. My website is here to help show YOU what is possible - what YOU could set up in your business with WordPress to increase sales, automate tasks and (ultimately) turn your ideas into working WordPress solutions.

1 thought on “Add Social Media Icons to your menu in WordPress”

  1. Every time I try to update my website I get this error. Can anyone help me get rid o this?

    400 Bad Request
    Your browser sent a request that this server could not understand:

    (none)the (port 80)
    Please forward this error screen to’s WebMaster.

Leave a Comment

Your email address will not be published. Required fields are marked *

Grow your WordPress business by getting...
My best tips to your inbox!

I'll send you emails when I publish content I think will help you and your business. You can opt-out at any time and change the topics of emails you get.

This site is not a part of the Facebook website or Facebook Inc. Additionally, this site NOT endorsed by Facebook in any way. FACEBOOK is a trademark of FACEBOOK, Inc.

Scroll to Top