JSFiddle - React, Tailwind, and code Playground

HTML

<p class="icon_text sprited"><a id="icon_twitter" href="http://twitter.com/caffegelato/" target="_blank"><span></span>Twitter</a></p>

<p class="icon_text sprited"><a id="icon_facebook" href="http://www.facebook.com/GelatoNewark" target="_blank"><span></span>Facebook</a></p>

<p class="icon_text sprited"><a id="icon_googleplus" href="http://bit.ly/cg-plus" target="_blank"><span></span>Google Plus</a></p>

<p class="icon_text sprited"><a id="icon_foursquare" href="https://foursquare.com/venue/526295" target="_blank"><span></span>Foursquare</a></p>

CSS

a {
    display: block;
    margin:  0.5em 0;
}
a:hover { color: rgb(32,0,0);}  
a span {
    background: url('http://caffegelato.client-proof.com/wp-content/themes/luxuos/images/social/CG_icon_set_35px_v2.png') no-repeat top left;
    width: 35px;
    height: 35px;
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle;
}
#icon_twitter span { background-position: 0 0; }
#icon_twitter:hover span {
    background-position: 0 -35px;
}
#icon_twitter:active span { background-position: 0 -70px;}

#icon_facebook span { background-position: -35px 0; }
#icon_facebook:hover span { 
    background-position: -35px -35px; 
}
#icon_facebook:active span { 
    background-position: -35px -70px; 
}
#icon_foursquare span { background-position: -105px 0;}
#icon_foursquare:hover span { background-position: -105px -35px;}
#icon_foursquare:active span { background-position: -105px -70px; }
#icon_googleplus span { background-position: -70px 0; }
#icon_googleplus:hover span { background-position: -70px -35px; }
#icon_googleplus:active span { background-position: -70px -70px; }