How to Add Social Media Icons to WordPress Menu (in 2023)
A typical topic among newbie bloggers is how to add social media icons to the WordPress menu. If you’re one of them, this article will be beneficial to you. If you follow the steps outlined below, you will know How to Add Social Media Icons to WordPress Menu no matter what theme you’re using.
Why add social media icons to the WordPress menu?
Everyone in this generation has at least one social media account. As a result, using social media to engage with your audience might be a great idea. However, if you include a link to your social profile on your website, but it appears at the end of your content or in the footer then your website’s click-through rate to social media may be lower. You should include a link to your social media accounts in the header so that your users can find them quickly.
It will provide you a good look as well as certain advantages. In this post, I’ll show you how to add a social icon to your Menu so that your users can easily access your social media link and interact with you on social media.
How to Add Social Media Icons to WordPress Menu
There are a few options for incorporating social icons into the Menu. If your theme offers a built-in option to display a social icon in the Menu or top menu bar, you can easily add it to the Menu. Don’t worry if you don’t have the theme option; I will show you how to add a social icon to the Menu. And, no matter what themes you have, this technique will work for all themes. On the Menu, I’ll add Font Awesome icon. You’re probably familiar with the concept “Font Awesome.” Font Awesome is a website that has over a thousand icons. You can easily add those icons to your website.
So, let’s have a look at how to include an icon in the Menu.
Step 1: Go to the Font Awesome website.
First, you just need to go to the Font Awesome website. You can find the Font Awesome webpage by doing a google search. Alternatively, you can go straight to the website by clicking here.
Step 2: Find and copy the Social Icon.
It’s time to move on to the following stages after you’ve entered the website. Right now, you have to find the social icon. To find the icon, use the search option.
Step 3: Select the icon & and Copy the URL
Once you’ve found the icon, click it. You have to copy the HTML. Hovering over the HTML text will reveal the phrase “click to copy,” as shown in the image below. To copy the HTML text, you have to click on it.
Step 4: Go back to the WordPress Dashboard and Add Menu.
Go to the WordPress dashboard and navigate to Apperence>>Menu after copying the HTML. Now you have to add your social media site as a menu item. To do so, go to the Custom Link and click on it. In the URL box, paste the URL of your social media site, and in the link text box, paste the HTML code you copied from the FontAwsome website. Then select the option to Add to Menu. Also, remember to save your settings. Go to your website after saving the settings, and you’ll notice a clickable social icon in the menu section. You can add as many social icons as you want to the WordPress menu.
If it doesn’t work, then follow the below steps.
Sometimes It doesn’t work because the themes don’t have the Font Awsome CSS and fonts installed. You must declare CSS 1st on your website. To do so, you have to paste a few lines of code in your header.
By navigating to the theme editor, you can paste the code. However, if you are not a techie, I recommend using WPBeginner’s Insert Headers and Footers plugin. It allows you to add code to the header without having to use the theme editor. And if you discover something is wrong, you can simply delete the code from it.
Install and activate the plugin. Now go to the settings, where you will find Insert Headers and Footers option.
Go there and paste the code which is given below.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"/>After inserting this code check out your website. You will see the social icon is now visible on your site.
WarpingUp
I discussed how to include a social icon in your Menu in this article. This is a straightforward method that may be performed no matter what theme is being used. If you have any further questions, please leave them in the comments section, and I will gladly answer them.
You can read the following articles also :
