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.

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 http://fontawesome.io/icons/ 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 http://fontawesome.io/icons/ 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.

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.

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.

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

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.

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.

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.