Do you want to add social media icons to WordPress menus? If yes, you have successfully landed on the right page. This article will teach you the most straightforward and convenient ways to add social media icons.
Before beginning the step by steps guide to adding social media icons, let’s know ‘What is a Social Media Icon?’ Social Media Icons are shorthand symbols that enable us to link our company profile on different platforms. These icons use the symbol logo of the respective social media company.
Social Media Icons provide a link to the company’s social channel. It can be used on websites, homepages, blogs, posts, emails, newsletters and much more. As most social media icons are easily recognizable, they can be accessed easily by users. This will eventually help the website owner to connect with their clients, and customers and share the necessary information in a convenient way.
By now, we are sure you know what social media icons are and somewhat of their uses. If you have decided to add social media icons to your WordPress menus as well, make sure to continue reading this article. We will provide you with simple two methods to do so.
Method 1: Use Responsive Menu WordPress Plugin
Method 2: Use Font Awesome Icon to Add Social Media Icons
Method 1: Use Responsive Menu WordPress Plugin
In this method, we will use the Responsive menu WordPress plugin to add social media icons to WordPress menus. This method is more suitable for WordPress Beginners as this amazing WordPress plugin will let you finish your work with ease.
Before beginning the steps let’s know about the Responsive Menu Plugin in more detail.
Responsive Menu – Create Mobile-Friendly Menu
Responsive Menu is a highly customizable plugin for WordPress. This plugin enables you to convert your current theme menu into a mobile-ready, fully W3C compliant responsive design in seconds. Users can add menus to tables in the most appropriate and functional way using this plugin. You will get 150 customizable options along with a combination of 22,500 options! The Social Media Icons look visually appealing and work perfectly when you decide to add them using the responsive Menu Plugin.
Even if you are a WordPress beginner, you don’t need to worry much while using this fully functional WordPress Plugin as you don’t need to have any coding skills. Just use an easy-to-use interface and make your menu’s social media icons look exactly as you want with minimum fuss.
Step 1: Installing and Activating Responsive Menu WordPress Plugin
You need to make sure that you have installed and activated the Responsive menu WordPress plugin in order to add social media icons to WordPress menus. If you haven’t installed the plugin, make sure to install it immediately!
Get Responsive Menu Plugin for yourself on the WordPress Repository or Official website. You can even download the plugin directly from the site Dashboard.
Read our article ‘How to Install New WordPress Plugin’ if you don’t know how to install a WordPress plugin.
After installing the plugin make sure to Activate it.
Once you Activate the plugin, the Responsive Menu option will appear on the left sidebar of the page.
Step 2: Use HTML Code in Mobile Menu
In this step, all you need to do is add the HTML code and you will get a responsive social media icon on your website.
- First of all, log in to the Dashboard of your Website.
- Go to Responsive Menu>>Menus option at the left sidebar of the page.
- Click on the Customize option of the menu in which you want to display your social media icons.
- Now, click on the Mobile Menu option of the Responsive Menu plugin.
- In order to add the code go to Container>>Additional Content.
- Make sure to copy and paste the code given below in the Content section.
<div class="rmp-sat-contact">
<div class="social-media-link">
<a href="#">
<span class="dashicons dashicons-facebook-alt "></span>
</a>
<a href="#">
<span class=" dashicons dashicons-twitter "></span>
</a>
<a href="#">
<span class=" dashicons dashicons-instagram "></span>
</a>
<a href="#">
<span class="dashicons dashicons-video-alt3 "></span>
</a>
</div>
</div>- Finally, make sure to click on the Update button.
- After that, you will be able to see the Social Media Icons as shown in the screenshot below.
Method 2: Use Font Awesome Icon to Add Social Media Icons
In this method, you need to get the social media icon code from Font Awesome Icon.
Font Awesome Icon is the internet’s icon library and toolkit that is used by content creators, designers and developers. You can get both free and premium icons for your website without any hassle.
Step 1: Search for Icons
- First of all, go to Font Awesome website.
- Search for a particular Socia Media icon. For example, if you search for Facebook, then you can get the Facebook Icon.
- Click on the icon that you want to get for your website’s menu.
- When you click on a particular icon, you can see its HTML code. Make sure to copy that code.
- If you want to get other social media icons, make sure to follow the same step as mentioned above.
Step 2: Add Font Awesome Icon Code to a Menu
- Firstly, visit the Dashboard or your WordPress website.
- Then click on Appearance>>Menus option at the left sidebar of the page.
- Now, click on the Custom Links option.
- Paste the HTML code you have copied before in the URL option.
- Similarly, type the respective Link Text.
- Click on Add to Menu option.
- Finally click on the Save Menu option at the bottom of the page.
- Now, when you visit your website you’ll be able to see the Facebook option on the menu of your page.
Wrapping Up:
This is it! You can follow the detailed step-by-step guide from any two methods to add social media icons to WordPress menus. If you are a beginner, using a WordPress Plugin will be much more convenient. You can use the Responsive Menu WordPress Plugin to add social media icons without much more hassle.
Also, you can get the Responsive Menu Pro for more advanced features:
If you have any confusion while following this step-by-step guide of any of the two methods make sure to let us know about it in the comments section below. We would be happy to help you throughout. Also, do let us know what you think about the Responsive Menu Plugin.
Also, Check-Out: