lo que yo suelo hacer es
Código HTML:
Ver original<a href="#" class="icon-facebook">Facebook
</a>
Código CSS:
Ver original.icon-facebook{display:block;float:left;width:30px;height:30px;background:url(img/social-media.png) no-repeat 0 -30px;}
.icon-facebook:hover{background-position:-30px -30px;}
bien la imagen de fondo contiene dos iconos en diferente posición y al hacer el hover hago que el fondo cambie de posición mostrando la imagen coloreada... ñ.ñ y para rematar yo considero que poner texto en el enlace da mas peso para el seo que cuando pones una imagen.