If your WordPress theme doesn’t offer a feature to add social icons in your widgets, like in your footer or sidebar, and it doesn’t even have Font Awesome integrated, then you’re on your own. You’ll have to either add social icons manually or use a plugin.
So, let’s start with the manual part first, and then we’ll get to the plugin part.
How to manually add social icons in a WordPress widget
1. Get the icons
Let’s take Facebook as an example.
Go to their official Brand Resource Center, read their guidelines and then choose what icon would you like to use. For our example, I picked the one that’s usually used for social icons, the “f” logo.
To download that, scroll down a bit until you see Download Asset, on the right side. Choose the Media Type, accept their guidelines and press Download.
You’ll receive a .zip file with the logo. You’ll have .png, Adobe Illustrator (.ai) and Adobe Photoshop (.psd) files. We’ll just need the .png logo for our example.
I’ll choose the blue one that’s 50x50px in size.
2. Add the icons in a widget
What you need to do here is to:
- Upload your social icon(s) in the Media Library;
- Go to Appearance -> Widgets;
- Add a Text widget in your sidebar or footer;
- Add a Title, if you wish;
- Then paste the below HTML code in the Text tab of the widget, not the Visual one.
<a href="https://www.facebook.com/your-page-name/" target="_blank"><img src="https://yourdomain.com/wp-content/uploads/2017/08/FB-f-Logo__blue_50.png" alt="" width="50" height="50" class="alignleft size-full wp-image-154" /></a>
In that code, you need to replace http://yourdomain.com/wp-content/uploads/2017/08/FB-f-Logo__blue_50.png with your actual image link. Here’s how you can find and copy an image’s URL.
And, of course, also change https://www.facebook.com/your-page-name/ with your actual Facebook page link.
Here’s how it should look like in the back-end, in the widget area:
And here’s how it looks in the front-end, on the website:
Here’s the back-end again:
Make sure you add the codes inline, one after another, like you see in the image, otherwise the icons won’t stay aligned well.
Here’s the front-end:
They look pretty neat, huh?
How to get the code yourself
If you’re not familiar with HTML and you wonder how can you get that code yourself, well, there’s an easy and fast way to do it:
- Create a Draft post or page;
- Click the Add Media button, like you normally would when adding an image;
- Select the social icon;
- Add a Title and Alt Text, if you wish;
- Choose Left for Alignment;
- Choose Custom URL for Link To and add the URL of your social page;
- Choose Full Size for Size (make sure you add proper sized icons);
- Press Insert into page.
Now the code will be displayed in the Text tab of your post or page.
The only extra thing that you need to do is to add
target="_blank" (highlighted with yellow) to the code, because you don’t have that option in WordPress by default.
What that does is to open your social page in another browser tab when the user clicks on it, otherwise it will load in the very same tab, and the user will have to click “Back” to see your website again, if they’ll click “Back”, and not just forget about your website.
Now you can copy the code and add it in a Text widget, like you saw above.
Adding social icons in a WordPress widget using a plugin
An easier route is to use a plugin, of course, and that plugin is called Social Icons Widget by WPZOOM.
The plugin has a lot of cool features, which you can see in their video and on their website.
Here are some of them:
- It offers 4 Icon Sets (Rounded Corners, Round Icons, Square Icons, Icon-only) from which you can choose more than 400 icons;
- It has a Global Color Picker, which allows you to set custom colors for your icons;
- It allows you to set the padding and size for the icons;
- It allows you to add links to your icons.
It pretty much covers anything that you’ll need when it comes to social icons.
That’s a wrap
Hope you found the post useful and comprehensive!
Don’t forget to share it with your friends!
If you have any questions or thoughts, please drop a comment, contact us, or message us on Facebook.