First of all find the buttons you would like to use

You can see my free icons here

But if you search Google images using the colour and/or style you want you will find lots of free resources.

Save the icons to your computer, you may need to unzip the file

Next go to your WordPress dashboard and open a new post (as if you are going to add a new blog post)

Title the post Draft:Social media icons HTML (this means that if you need to update them you can use the code again)

Click on the add media icon

Adding social media images

You will get a new window open as below

Adding image

Select the first social media icon (e.g. twitter) and add it

On the Insert media window pop up fill in as below

Adding image details wordpress

The click insert into post at the bottom

You should now see your icon

You can now resize the image (click on the photo icon that appears on the image to get the image options box)

By using the % slider or on advanced settings entering the exact size

In the advanced options you will also see at the bottom the option for making the link open in a new window

Repeat to add all the social media icons you would like

To add a link for an e-mail icon, instead of putting in the URL put in mailto:youremailaddress

When you are happy with the size and links switch over to the Text view and copy the text. If you save that post as a draft you will be able to use it and make changes to it.

Wordpress ad media social icons

Paste the code into a text widget on your widget page if that is where you want the buttons to show.

You can use the code anywhere that you can use HTML code.

Save the text widget and have a look on your site to see if the size, layout and links are correct, if not go back to the draft post and fiddle until you are happy.


Pin It on Pinterest

Share This