First, of course, you need to get/make your icons. You can get free icons in various styles, in several file types, for more social media sites than I've ever heard of here. That's where I got mine.
This is the Facebook icon I chose. But I didn't want it to be black, so I pulled the png file into Photoshop.
I just locked the transparent pixels, pick my color, and (on a Mac) hit SHIFT+F5 to fill the unlocked pixels with the new color.
And now I have my own customized Facebook icon.
Then you just follow the same steps as in this tutorial for adding customized navigation tabs.
If you want to have an e-mail icon, the code goes like this:
<a href="mailto:email@example.com" mce_href="mailto:firstname.lastname@example.org/"><img src="the url where the image is hosted aka Direct Link on photobucket" mce_src="the url where the image is hosted aka Direct Link on photobucket" border="0" /></a>
Just change the red text to your information.
If you are adding multiple icons, you can put a couple spaces (not line breaks, just spaces) between the code blocks to make them not butt up against each other.
Social media icons: check!
Now on to the next blog-improvement project...
(This post just needed a Pin-able image, so now it has one.)