Nowadays social networks are so important as the content of your website. Unfortunately, WordPress doesn’t come with a native feature to include them in the site menu.
In this tutorial, we’re going to describe you two ways to add an Instagram, Facebook, Youtube, Vimeo, and all available social media icons to your menu with two of the best plugins available.
QuadMenu
QuadMenu is a mega menu for WordPress which offers a very easy to use drag & drop interface that allows you to include all available social media icons in your menu.
This feature is only available in the premium version of the plugin that you can purchase in the site www.quadmenu.com
Install QuadMenu
1. In the WP dashboard go to Plugins > Add New.
2: Click on the Upload Plugins field and search for “quadmenu-pro.zip”
3: Click the Install Now button and then Activate in the WordPress Mega Menu plugin
After activating the QuadMenu you’ll be redirected to the options page where you’ll see all the menu locations available in your theme. You have to switch on the integration button and select the theme of that menu location.
Select Icon Fonts
1. Go to QuadMenu > Configuration > Icons
2. Select the icon font and then press the Save button
Select Icons
1. Go to QuadMenu > Social
2. Add as many social networks you want
3. Set the name link and icon of each social network
Creating a Menu
1. On your WordPress dashboard go to Appearances > Menus
2. Create a new menu
3. Select the active menu location
4. Click on Save Menu
After create and select the menu location of your menu, see a new metabox called QuadMenu Items where are available all menu elements.
Add Social Icons
1. Go to QuadMenu Items metabox and select Social
2. Press the button Add to Menu
3. Click on the QuadMenu button that you’ll see on the new social menu item
4. Go to the General tab and select the view: Toggle or Embedded.
WP Menu Icons
WP Menu Icons is a very simple plugin for WordPress that helps you to include icons in your menu. After installing this plugin you’ll see a new metabox called WP Menu Icons where you can select between the most popular font icon sets available: Dashicons, Elegant Icons, Exclusive Icons, FontAwesome Icons, Foundation Icons, and Themify Icons.
If you want to know more about this plugin we recommend you to follow the instructions of this tutorial.
Thanks for the great info. You nicely described on adding Social Icons to your WordPress Menu and the explanation with images makes this article more suitable and easy to understand. I’m looking forward to more informative posts further and I like to wish you all the best.
At first I thought QuadMenu won’t let me enter Instagram icon to my menu! The default Dashicons font doesn’t have it. Luckily I found this tutorial – thank you for help.
I can not change size of my social icons or customise search icon
Hello, I’m afraid is not possible to customize search icon, you can do it via custom CSS
Hello
Thank you for this short tutorial
I think most bloggers need these icons
Thank you
Hi,
Does it work with „Duotone” fontawesom5?
Hello! Im currently using divi quad menu, with font awesome5 and after i updated to the latest version they have stop working. Only square images shows in the place of the icon. Can you help?