I would create an image sprite for my icons. And then for the markup I would use a list and set the icon images as background images to their respective anchor tags... Something like this...
HTML
<ul>
<li><a href="" class="icon facebook">Facebook</a></li>
<li><a href="" class="icon twitter">Twitter</a></li>
<li><a href="" class="icon googleplus">Google Plus</a></li>
</ul>
CSS
ul li {
float:left;
display:block;
}
.icon {
width:25px;
height:25px;
display:block;
text-indent:-9999px;
background-image:url(http://tridentdesign.com/wp-content/uploads/2012/12/gemicon.jpg);
background-repeat:no-repeat;
}
.facebook {
background-position:-140px -115px;
}
.twitter {
background-position:-185px -115px;
}
.googleplus {
background-position:-140px -265px;
}
HERE IS A FIDDLE TO DEMONSTRATE:
Edit: I updated my css to match my fiddle.