#BloggingHacks: How to add Social Media Icons to your Blog
To do this, we'll be using Font Awesome's free icon resource library. Don't worry you don't have to sign up to or pay for anything.
The Finished Result
Kinda neat, huh? I've made mine particularly huge for the purpose of this blog post. However, you can see in my sidebar how they really look.
The code comes in two parts, one you add into your blog's template which can be found on Blogger in Template > HTML. This particular piece of code tells your blog to go read the Font Awesome styling in order to display the icons. You'll need to paste it in between the <head> and </head> tags as this is where any references to stylesheets should go.
But before editing your blog's template, I'd highly recommend you download a copy for safe keeping in Template > Backup/Restore. Just in case!
If you're having any problems with this step, you can check out their help guide here.
All you need to do now replace the links with your own. You can also check out the large range of icons on the Font Awesome website if you need to link to your Snapchat or Etsy Store - it's completely free!
<a href="https://www.bloglovin.com/blogs/charley-lucy-14945109" class="fa fa-plus" aria-hidden="false"></a>
<a href="http://www.twitter.com/charleylucy" class="fa fa-twitter" aria-hidden="false"></a>
<a href="http://www.instagram.com/charleylucy" class="fa fa-instagram" aria-hidden="false"></a>
<a href="https://www.facebook.com/charleylucyblog" class="fa fa-facebook" aria-hidden="false"></a>
<a href="http://www.youtube.com/charleylucify" class="fa fa-youtube-play" aria-hidden="false"></i></a>
Step 3: Customise!
A standard, the icons are a set size and black in colour. You can look into how to make them bigger or smaller here by adding a fa-5x etc. attribute to the class. It's all just copy and paste in the HTML view of the post editor. With a little bit of CSS know-how you can also change the colour and hover colour too, so let me know if you'd like me to cover this in a future blog post.
See, I told you it was easy! You don't just have to use these in the sidebar. You can use the code when signing off your blog posts to promote social interaction or get creative with the bullet points you use like I did here.
If you've added social media icons to your blog using this tutorial, I'd love to know how you got on in the comments below! Don't forget to let me know what other "technical" blogging posts you' like to see too, I've already covered basic coding, how to improve your in-page SEO and collated a bumper list of blogging tips, extensions and apps here.