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
You will get a new window open as below
Select the first social media icon (e.g. twitter) and add it
On the Insert media window pop up fill in as below
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.
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.