In this video tutorial, I’m going to show you how to add a Facebook Icon to the WordPress header. During this process, you’ll see the really cool social icons I use.
If you want to grab those for your own site (they’re free and awesome!) do watch the earlier video here as I show you where and how to get them.
So, this video tutorial focuses on how to add a Facebook Icon to the WordPress header in your theme, but you can apply the same process to add social icons to the wp footer since the process is the same. It’s pretty straightforward when you see how.Making your WordPress site look its best is an ongoing process for every WordPress site owner.Click To Tweet
Here's what we're going to be covering...
As I mentioned, this video tutorial is actually a continuation of the how to insert a social media icon in your WordPress menu.
I put this quick tutorial together because there’s plenty of people who prefer to display icons in the footer (like I do).
And so the first thing you want to do is a what we covered in the last video: you’re going to go to fontawesome.io and once there you’re going to click on icons and here you’re going to search for the icon that you want.
In the video, I actually show you how I do this.
As we’re using Facebook as our example, you’ll want to search for the fb icon and then click on the style of icon that you like (I choose the square one) and then you’re able to grab the shortcode that references that icon (see video for details). I’m going to copy by doing ctrl C now in WordPress you have two choices if you’re comfortable doing so you can edit your theme code to insert that line that
You’ll want to copy by doing ctrl C in order to bring that across to your WordPress site.
If you want to add a Facebook icon to the WordPress header I recommend using a plugin
In WordPress you have two choices: if you’re comfortable doing so, you can edit your theme code to insert that line of code you just copied. You can insert this into either in your header section or your footer section. If you’re not comfortable doing that, then I suggest that you use a plugin that enables you to insert code in the header or the footer of your WordPress blog.
In the video, I choose the plugin option, because there are literally thousands of wp themes and themes are different, so I can’t talk about one specific theme and cover them all. If I show you how to add the code to my theme, it’s probably not going to apply like-for-like to many other themes.
Inside your wp dashboard, go to the plugins section and search for a plugin called insert headers and footers. That’s the one I recommend.
Install that and then activate it. Then find the plugin’s tab in the dashboard menu (see video for details).
So let’s say that we want to insert the code in the header: we just paste in the line that we took from fontawesome in the header section (see video for details). The process if the same if you want to insert it into the footer instead: you just paste it into the footer section, then click on save.
In the video, I then go back to the home page of the blog and refresh the screen to reveal the fb icon appearing in both my header and footer.
In some cases, you may need a little CSS to style things and positioning and make it look good.
Finally, I recommend that you have the icon’s click event open up the social media page in a different tab. To do this, follow my guide in the video. You basically wrap the code in a href tag and set the target to blank.
Please see the video to see exactly how I do this.
Troubleshooting Icons Not Appearing
If your icon doesn’t appear, check out this article on troubleshooting tips for Font Awesome icons not displaying.
This was an Ask Hoz question about how to add a facebook icon to the WordPress header that featured on the Youtube Channel. Make sure you CLICK TO SUBSCRIBE to catch all the video updates!
Please Share This Content
Hey, I would really appreciate it if you share this content with your friends and followers :)?