Social Network Icons Added

I have added the social network icons Facebook and Twitter to my side bar today. I had an RSS on in place but felt it was time for a change. The icons us one PNG image and CSS to position the image based on static or hover actions. If you view the source, you can see that it is fairly easy to accomplish.

Here is the code:

<div id="socialIcons">
<a href="http://feeds.feedburner.com/RedDolan" rel="alternate" type="application/rss+xml" title="RSS"><div class="socialIcon rss"> </div></a>
<a href="http://facebook.com/reddolan" title="Facebook" target="_blank"><div class="socialIcon facebook"> </div></a>
<a href="http://twitter.com" title="Twitter" target="_blank"><div class="socialIcon twitter"></div></a>
</div>


Here is the css:

#socialIcons .socialIcon {width:38px; height:38px; background:url('http://reddolan.com/wp-content/themes/reddolan/images/socialNetworking-red.png') no-repeat; float:left;}
#socialIcons .socialIcon.facebook {background-position:-50px 0;}
#socialIcons .socialIcon.twitter {background-position:-100px 0;}
#socialIcons A:hover .socialIcon.rss {background-position:0 -50px;}
#socialIcons A:hover .socialIcon.facebook {background-position:-50px -50px;}
#socialIcons A:hover .socialIcon.twitter {background-position:-100px -50px;}


Here is the image: