How to Add Social Media Icons to WordPress Menu?

Regardless of whether you are running a business or a personal site, you need to make sure that users can share your content on social media. That’s why in this post, we’ll show you how to add social media icons to your WordPress menu.

Why Add Social Media Icons to the WordPress Menu?

According to recent studies, nearly 50% of the global population uses at least one social network. Connecting your site with Facebook or adding Instagram feeds to your website are good options but there’s something else you can do to grow your social media presence.

The menu is one of the most prominent elements on your site. Additionally, it’s one of the first things that users see when they visit your site. For example, have a look at our website’s primary menu.

quadlayers header

So, to customize your site and make the most of your social media channels, you can add social media icons to your WordPress menu. On top of that, you can display icons on other areas of your site that support widgets such as your footer, sidebar, and so on.

Even though some themes like Divi include some options to add social media icons to the menu, most themes don’t come with this feature. And WordPress doesn’t include a native feature to include icons in the menu either. So, in this post, we’ll show you three methods to easily add social media icons to your WordPress menu.

How to Add Social Media Icons to your WordPress Menu?

There are three main ways to add social media icons to your WordPress menu:

  1. With plugins
    1. QuadMenu
    2. WP Social Icons
  2. From the theme customizer
  3. Manually using FontAwesome icons

In this guide, we will describe each method step-by-step so you can choose the one you like best.

1) Plugins

Using plugins is the easiest way to include social media icons on your menu. There are several options out there so, to make your life easier, we have listed two of the best plugins you can use.

1.1) QuadMenu

Add Social Media Icons to WordPress Menu - QuadMenu

QuadMenu is the best tool to easily customize and take your WordPress menus to the next level. This is a freemium plugin. There’s a free version with basic features and three premium plans that come with more advanced features and priority support.

quadmenu pricing

To add social media icons to your menu, you need the premium version. So, let’s see how to install it and activate the plugin on your site.

Installation and Activation

First, you need to purchase the plugin and download the files to your desktop. Then, before installing it, you need to install the free version on your site. To do that, go to your WP dashboard > Plugins > Add New. Then, use the search bar and look for QuadMenu. After that, press Install and then Activate.

install quadmenu plugin

After activation, use the files of the premium version you downloaded before and install them on your site.

install quadmenu premium

Once you have activated the plugin, you will need to verify your license key. From your QuadMenu account’s dashboard, you will see the licenses option.

quadmenu licenses

Copy the key from there and paste it in the licenses field with your registered email address to verify your key.

quadmenu licensing option

The plugin is available in our store, Envato, and Elegant marketplace, so use the dropdown menu to select the appropriate option for your purchase. After verifying it, you are good to go.

Add social media icons to your WordPress menu with QuadMenu

QuadMenu works with any free or premium theme. For this demo, we are going to use GeneratePress but the process is similar with any other theme.

First, let’s go to the plugin’s settings by going to QuadMenu > Options.

Add Social Media Icons to WordPress Menu - Quadmenu options

There, you will see several customization options such as:

  • Primary menu
  • Responsive
  • Default theme
  • Customize
  • Social
  • Import/ Export
Configure social options

In our case, we need to add social media icons to our primary menu. So, we’ll select the Social option.

social option

You will see several default options that you can edit or delete depending on the channels you have. They already have assigned icons with social media profiles. However, you can also customize them by clicking on the + Add Icon button. Additionally, you can add new social media channels by pressing the + button.

add icons

Let’s say you want to change the Facebook icon. Press + Add icon and you will see a pop-up with plenty of icons that you can choose.

all available icons

There are many icons so we recommend you use the search feature to filter the results.

search for fb icon

As you can see, we have searched for Facebook icons. It will show you all the available icons related to your search query so select the one you like and save it.

You can also change the titles and URLs. Once you’ve made all the changes you want in QuadMenu, save the settings.

save quadmenu plugin settings

After that, go to the WordPress menus. You will see all the available menus there. To use the QuadMenu options on your menu, you need to mark it as QuadMenu Dev under the Menu settings. After that, save the menu.

quadmenu dev option

On the next page load, you will see the QuadMenu options.

quadmenu options

Under the QuadMenu items, you will see the Social icons list. Select them and press Add to Menu.

add social icons to menu

After that, you will see the Social section under the Main Menu options. Hover your mouse over and you will see the QuadMenu customization options.

quadmenu social icons

If you need additional customization, select that option. Otherwise, press the Save Menu button and you are good to go.

Add Social Media Icons to WordPress Menu - Save wordpress menu

Icons on the menu (Frontend)

Now, it’s time to check the results. So, go to your website’s homepage and you will see the social icons. And when you hover over them, the icons will be rendered.

Add Social Media Icons to WordPress Menu - QuadMenu final

That’s it! You have successfully added social media icons to your WordPress menus with QuadMenu.

1.2) WP Menu Icons

If you can’t afford any premium plugins, don’t worry. We have got a free solution for you.

In this section, we are going to show you how to add social media icons to your WordPress with a free plugin called WP Menu Icons.

Add Social Media Icons to WordPress Menu - WP menu icons plugin

Installation and Activation

First, install and activate WP Menu Icons on your site.

install wp menu icons plugin

This tool is very easy to use and doesn’t require any additional customization.

Customizing Menu Icons

If you don’t have a menu on your site, you can create one from the configuration section.

create menu

Assign a location to your menu and then you are ready to add items to it.

To add your social media profiles to the menu, choose the Custom Links item. You will need to enter the URL to the page you want to link and a label. Then, press Add to Menu.

add facebook link to menu

After you add the icon to the menu, the configuration page will look like this.

fb added to menu

Similarly, you can add other social media icons. In this case, we’ve added Twitter, Pinterest, and Instagram icons to our menu.

social profiles added

On the menu items, there’s a + button. That’s the setting you need to use to add icons to the menu items, so click it.

Add Social Media Icons to WordPress Menu - add icon

Then, you will see a large selection of items to choose from.

all icons

There are dozens of icons so use the search feature to filter the results you want. In this case, we have selected the Facebook menu item, so we’ll search for the Facebook icon.

facebook icons

After selecting the one you like, you will see the icon settings in the right column. Here you can display or hide the label, customize the position, size, and alignment. In this case, we’re going to hide the label. After you’re done with the customization, click Save.

hide label

You can customize the Pinterest, Twitter, and Instagram icons in the same way. After adding the required icons, save the menu.

Add Social Media Icons to WordPress Menu - WP menu icons Save menu

Now, it’s time to check the result. Go to your website’s frontend and you will see the new icons.

Add Social Media Icons to WordPress Menu - WP menu icons in frontend

That’s how you can add social media icons to your menus in WordPress with WP Menu Icons. Finally, you can also style your icons from the WP Menu Icons settings page.

2) Theme Customizer

If you don’t want to install any plugins, you can include social media icons to your menus using your theme customizer. Some premium themes such as Divi, Newspaper, or Avada come with integrated theme panels that allow you to customize the theme and add social media icons.

For our demonstration, we are going to use the Divi theme by Elegant Themes.

First, go to your WP dashboard > Appearance > Customize.

customize divi wordpress theme

Then, go to the header customization and header elements. There, you will see an option to enable header social icons.

show header social icons

Enable that option and then you will see it on your website’s header.

divi social icons

Additionally, you can customize them by going to Divi > Theme Options.

Add Social Media Icons to WordPress Menu - Divi theme customizer

There, you can enable the icons you want and enter the URL of your social media profiles. The social media icons will appear in both the header and footer of your site by default.

Add Social Media Icons to WordPress Menu - Divi icons on footer

However, you can choose to hide them through the customizer settings.

hide footer icons

Other themes like Newspaper and Newsmag have their own customization options, so you can enable/disable icons and display them right through the dedicated theme panel. If you can’t find the social media icons section in the theme customizer or panel, feel free to leave a comment below and we’ll try to help you.

3) Using FontAwesome

Finally, you can add social media icons to your menus in WordPress manually. Even if you’re not a developer or don’t have coding skills, you can display social media icons with a bit of HTML coding. To do that, we’ll use FontAwesome’s icons.

So, the first thing you need to do is go to the FontAwesome website.

Add Social Media Icons to WordPress Menu - Fontawesome

Use the search feature to find the icons you need. For this demo, we are going to search for Twitter icons.

twitter icons

On the next page, the website will show you the search results. Choose the one you like best.

select logo

On the next page, you will see the details of the icon you selected so simply copy the HTML code of the icon.

Add Social Media Icons to WordPress Menu - HTML

Adding Font Awesome Icons To WordPress

Then, go to the menus section on your WordPress site. On the left side, you will see the custom links section. You will need to enter the URL to your Twitter profile and paste the HTML code you have just copied in the Link Text field. Once you do that, press Add to Menu.

add to menu

After that, save the changes. Then, go to your site’s frontend and you’ll see the icon.

twitter icon on frontend

This way, you will be able to add any social media icon to your menu.

HTML code doesn’t work

If you’ve followed every step of this tutorial but the HTML doesn’t work, try this. If the fab code doesn’t work, try changing the HTML code by removing the b from the fab. So, for example, in our case, the final HTML code will look like this <i class=”fa fa-twitter”></i> instead of <i class=”fab fa-twitter”></i>.

Example:

Add Social Media Icons to WordPress Menu - HTML modified code

Conclusion

All in all, adding social media icons to your WordPress menus is an excellent way to boost your social media presence. In this guide, we’ve seen 3 different ways to do it:

  1. With plugins
  2. From the theme customizer
  3. Manually

If your theme allows you to add icons by default, you don’t need to use any extra plugins or HTML code. If you prefer a plugin, we recommend you use QuadMenu. It will allow you to gain full control of your whole WordPress menu customization and it also comes with plenty of powerful features. However, if you prefer a free solution, have a look at WP Menu Icons. It’s a simple tool that will help you include social icons in no time.

On the other hand, if you don’t want to install any plugin, you can add social media icons using a bit of HTML and FontAwesome icons. This option also allows you to customize the icons with a bit of CSS or you can avoid the styling part and use the default icons.

Have you found this article helpful? If you did, leave us a comment below and share this post on social media. For more related tutorials, check out our blog archive.