Audio Version [click the globe to change language]
So my buddy is trying out WordPress, and he asked me:
How do I add social icons to WordPress without a plugin?
So I made a video tutorial to demonstrate how to do this quickly and easily.
I’m also going to share with you two awesome graphic resources where you can get thousands of icons for free. In fact, I used one of those resources to get the social icon to add to my WordPress site menu in the tutorial.
An added bonus is that the method I’m about to show you requires no plugin, which helps keep your WordPress website lighter.
By the way, while you’re here, remember to check out my recommended tools for WordPress.
Ok, let’s start with the video where I demonstrate how to add an icon to the navigation menu, and then I’ll give you the written version in the rest of this article so you have a quick guide you can scroll through with all the important details.
Now, let me point out that you can, of course, use a plugin to get those icons in place, if you so wish. I run a ton of plugins on my blog so, personally, I prefer to avoid adding even more whenever I can.Tweaking your WordPress website so it looks its best is an ongoing process. Accept the challenge or go home 🙂Click To Tweet
We’re going to need 2 things to get this job done:
- the social media icon
- the link to the social media page
I chose to add a twitter icon to my wp menu, but the process applies to any icons you want – not just social icons.
You can also go crazy and add multiple icons to your website’s navigation using this method. In fact, social icons can also look pretty cool along the footer of your site.
Ok, let’s get to it. And let me just add that, if you’re new to this, the most common icons to get started with, based (roughly) on popularity are:
At least that’s what the web statistics (at the time of this writing) are saying.
So here are the steps:
Step 1: go to fontawesome: click here to visit that page
As you can see on that page:
Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.Description on fontawesome’s website at the time of this writing
Step 2: click on Icons in the navigation menu (see image below)
Step 3: scroll down the page until you see the long search box. Type the name of the social network who’s icon you want to find into the search box. The results you see are the available social media icons that match your search. In my example, I typed in Facebook (see image below).
Step 4: hover your mouse cursor over the style of icon you want to use and click it to select it – it will turn green (see image below).
Step 5: this will take you to a new page where the icon ‘lives’. On this page you will see a button that says Use this Icon. Click the button to bring up a popup box where you’ll see a snippet of code. Highlight the code and copy it to your clipboard by either right-clicking and then clicking on copy on the popup menu or by holding down the control key on your keyboard and then hitting the c key. Doing this will copy the highlighted text to your clipboard, ready for use in the next step.
Note: you can also simply click the copy icon to automatically copy the snippet of code to your clipboard, as I demonstrate in the video at the top of this page.
Step 6: now head on over to your WordPress blog. This is where we get to add our social icon to WordPress without a plugin. Log in, then hover your mouse cursor over Appearance on the navigation menu in your dashboard and then click on Menus on the second-layer pop-out menu (see image below).
Step 7: now, in your menu (which you should have set up already) click on the Custom Links panel on the left of the main screen to expand the widget, where you’ll see 2 input fields where you can enter a URL and text (see image below).
Step 8: now, in the URL field, enter the URL (web address) of the social media property you want the icon to link to (i.e. your twitter page, or your Facebook page) and then, in the link text, paste the code you copied from fontawesome and click the Add to Menu button (see image below).
Step 9: you should now see the new menu item in the main screen, where the navigation elements are stacked. Go ahead and click the save button to make that change stick (see image below).
Step 10: you should now see your social media icon on your WordPress menu (see image below).
But before we get too excited, let me point out the one remaining we need to address, and then let me show you how to fix that.
Here’s the thing: when you click that lovely new social media icon on your WordPress menu, it loads the page that you link to in the same window. In other words: it replaces your blog! Unless you have a one page website that does nothing but redirect people to one of your social properties, then I cannot think of a good reason why you’d want to load the target page in the same window. So, in this case, you’ll want the social media icon to load the social page on a new separate tab.
So let’s see how we do that:
In your WordPress dashboard, scroll all the way up and look at the top-right side for a tab named Screen Options.
Here’s what it looks like:
Click the tab to open it up and then tick the box named Link Target (see image below).
And, finally, scroll back down to your menu element and click the widget heading to open it up, then you’ll see that a tick box has appeared with the words Open in a new tab next to it. Tick that box and then click save menu (see image below).
Now, when a visitor clicks the social media icon on your WordPress menu, a new browser tab will open up and load the social media page. Fixed!
And that’s it! Now you have a step by step guide to add social icons to WordPress without a plugin. This is exactly how I do it. Just rinse and repeat the process to add the rest of your social icons to your website menu.
Ok, so what happens if you hit an issue? Worry not, for I have you covered:
Troubleshooting icons not appearing or appearing as squares
If you run into any issues, check out this guide on what to do if Font Awesome icons don’t appear.