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, “mailto:email@example.com”.
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:
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!