#BloggingHacks: How to add Social Media Icons to your Blog / Charley Lucy



Want exclusive downloads, blogger tips and beauty tricks sent straight to your inbox? Sign up to the Charley Lucy newsletter.

#BloggingHacks: How to add Social Media Icons to your Blog

Today I'll be showing you how to add social media icons to your blog in two easy steps. It's free, simple and makes your blog look more professional. Plus, you get bragging rights.

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.
How to add Social Media Icons to your Blog, Blogging Tips, Blogging Hacks, Blogging Help

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.

Step 1

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!

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

If you're having any problems with this step, you can check out their help guide here.

Step 2

The second part of the code is what you would place in your widget by visiting Layout > Add a Gadget > HTML/Javascript. I've copied my Font Awesome social media icon code below for reference and added in a few line breaks so it's easier to digest. Once you've copied and pasted your code into your new HTML/Javascript widget, feel free to delete them.

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>

If you'd like to understand a little more about the coding used above, have a read of my Simple HTML Coding for Bloggers post.

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.

© Charley Lucy • Theme by Maira G.