How to add social media icons to your blog

Thank you to everyone who has commented on my blog redesign, I’m so glad you like it! A number of people have asked how I added the social media icons to my blog. This was something I had been looking to do for a long time, and I struggled to find a good tutorial online. Ultimately I was lucky to have Rob to help me with this, but I appreciate that not everyone lives with someone who understands HTML and so I thought I would share with you how we did this, so you can have a go yourself.

I should emphasise that this is the way that we added the icons to my blog, but this is by no means the only way, or even the best – but it is the quickest, and is quite easy to follow for non-coders like myself!


The first thing you need to do is find the icons that you would like to use. I used a website called Icons Etc which has a huge range of customisable icons. You can change a number of features including the size, shape, colour and style and then download the whole set of icons to your computer – all for free! There are many other options out there though, so have a look around and see what you find.

Once you are happy you have found the icons that you would like to use, save them onto your computer. If you are using the website above, select the option to download the icons as PNG files. The file that you download will contain the whole set of icons, so it’s a good idea to choose the ones you want and save them somewhere else where you can easily access them.

That’s the icons sorted – now to add them to your blog. Please bear in mind that these instructions are specific to a wordpress blog, so it might be a little different if you are using another platform such as blogger.

FIrstly, upload the icons as images. To do this, select Media from the left hand menu, choose “Add New” and upload each icon that you want to add to your blog.

When you are happy that you have all the icons that you need saved, it’s time to do some coding! Choose Appearance and then widgets from the left hand menu and select a new “text” item from the list of available widgets. Drag and position this item onto the main sidebar on the right, where you want your widgets to appear.

In this box we are going to add the HTML code. One of the main points to remember is that most of the commands or “tags” come in pairs, so if you open something e.g. <tag>, you then have to remember to close it too </tag>.

Since I’m a perfectionist by nature, I wanted my icons to be lined up neatly! To get them looking tidy, we will organise them into a table. The first bit of code you need to create the table is:


Now to add each of your icons, and link to your social media sites. The basic code you need for each item is as follows:

<a href=”link to your account here“><img src=”link to the appropriate social media icon file here” style=”box-shadow:none”/></a>

For the link to your account, go to your twitter/facebook/instagram/whatever profile and copy the web address. Paste this in as indicated above. Then you want to add a link to your image. in the media section of wordpress, click on “Edit media” for the icon you want and select the web address on the right hand side. Paste this in as above as well.

If you want to use an email icon, add “mailto:” directly before the email address. So for example, “”.

Carry on adding all your different social media links by copying the code above and pasting each section directly after the one before. To start another row of icons, use the following to close the first row and begin another one:


Once you have added all your icons, you need to add one final piece of code to close the row and the table:


And we’re all done! That wasn’t too bad was it? Don’t forget to SAVE what you have done by clicking the button at the bottom of the widget box. You can then have a look at the result of your coding! Don’t worry if it doesn’t look right first time, you can always go back and make some changes. For example, depending on where you are positioning your icons, you might want to change the height and width of your table. You can do this by amending the first <table> as follows:

<table style=”height:Ypx;width:Xpx”>

This is the size in pixels (px). The red X and Y should be replaced by your preferred size – you can have a play around and see what looks best.

I hope this works for you. If anything is unclear, please do let me know. As I mentioned, this is a quick and dirty way to do it, but as someone who is not fluent in HTML this made sense to me, and hopefully it does to you too!

Kat xx


13 thoughts on “How to add social media icons to your blog

      1. Victoria Peat

        Woohoo, it totally worked (eventually!), there were a few extra ” that appeared when I was copying and pasting, but I got rid of those and it totally worked. Thanks for the walk through :-)

  1. Jocelyn

    Ok, for some reason it isn’t working for me. I tried it twice and on my page it shows up as boxes with little x’s to show that the picture isn’t there and when I click on them the link is broken. Well, it’ll go to facebook or pinterest but not my pages. It’ll go to an oops page for them. I looked back at my code and it looks like wordpress is taking away the http:// when I click save which may be why the links and pictures aren’t working. But why is it doing that? I tried writing all the code out in Word first and then copy and pasting it all at once and it still did it. Also, are all those parenthesis that you put to show where we add links supposed to stay or is that just to make sure we see where to put them?

    Thanks for posting this tutorial. I’ve been wanting to know how to do this for ages! I hope I can figure it out. In theory it seems pretty easy as you’ve shown it. Thanks!

    1. KraftyKat Post author

      Hi Jocelyn, hmmm how odd! Not sure what to say about the disappearing http:// I’m afraid, that is particularly odd after you paste it as plain text. Not come across that before. In terms of the parenthesis, they are not just for illustrative purposes, you should put your links within them. Maybe this will help? Let me know!

    2. KraftyKat Post author

      One more thing, just re-read your comment, have you tried copying the code into notepad and then into WordPress? Notepad puts it in to plain text and will get rid of any hidden formatting that might be lurking.

      1. Jocelyn

        Okay, I got it to work!!! Not entirely sure why, but I’ll take it. Like Victoria mentioned there was an extra apostrophe that would appear at the end of urls that I put in but when I deleted that it seemed to make the icons appear. The http:// still isn’t there but I was finally able to type mailto: back in and get it to stick. For whatever reason, some of the code seemed to stay that had been disappearing if I physically typed it in the widget box myself instead of copying and pasting. Don’t know why.

        I also looked into how to center the icons since I am only putting 3 on and I found this bit of code to add to the beginning and it worked in case anyone would like that. I used the width code you provided to help me decide how far apart the icons were from each other.

        Thanks again for your tutorial! I couldn’t have figured it out without it. This is my first time with coding and I’m glad it worked.


Leave a Reply

Your email address will not be published. Required fields are marked *

× seven = 49