JSFiddle - React, Tailwind, and code Playground

by sandeep

HTML

<ul class="social-icons"> 
<li class="facebook"> 
    <a title="Facebook" href="http://facebook.com/eclyptix">Facebook</a> 
</li> 
<li class="twitter"> 
    <a title="Twitter" href="http://twitter.com/eclyptix">Twitter</a> 
</li> 
<li class="linkedin"> 
    <a title="LinkedIn" href="http://linkedin.com/company/eclyptix">LinkedIn</a> 
</li>

CSS

li{
    background:url(http://i.stack.imgur.com/LNPd7.png) 0 0;
    float:left; 
    margin-left:10px;
    text-indent:-9999px;
}
li a{
     text-decoration:none;
     display:block;
     width:30px;
     height:29px;
 }
.facebook:hover{background-position:0 -29px}
.twitter{background-position:-30px 0}
.twitter:hover{background-position:-30px -29px}
.linkedin{background-position:-59px 0}
.linkedin:hover{background-position:-59px -29px}