Learn exactly how to makeBETTER WEBSITES RIDICULOUSLY FAST

Get exclusive tips that'll help you master WordPress, Beaver Builder and lots more.

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-icon-to-menu-multiple-icons-front-end

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 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.

add-social-media-search-result

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.

add-social-media-icon-instagram-result

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.

add-social-media-icon-instagram-result-code

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.

add-social-icon-to-menu-original-without-icons

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.

add-social-icon-to-menu-edit-menu

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).

add-social-icon-to-menu-edit-menu-instagram

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

add-social-icon-to-menu-edit-menu-instagram-added

And then click the blue Save Menu button.

add-social-icon-to-menu-edit-menu-save-menu

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

add-social-icon-to-menu-instagram-front-end

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.

add-social-icon-to-menu-multiple-completed

Repeat the steps shown in this tutorial to add multiple social media icons to your menu

add-social-icon-to-menu-multiple-icons-front-end

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.

add-social-icon-to-top-menu-done

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.

1 Comment

  1. JesusGospel on December 5, 2017 at 10:02 pm

    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 sharedip-10718049252.prod.iad2.secureserver.net’s WebMaster.

Leave a Comment

You must be logged in to post a comment.