CodePen

HTML

            
              <ul class="social-list">
    <li class="google" >
    <a href="http://twitter.com/"></a>
    </li>
    <li class="facebook" >
    <a href="http://facebook.com/"></a>
    </li>
    <li class="twitter" >
    <a href="http://twitter.com/"></a>
    </li>
    <li class="vimeo" >
    <a href="http://vimeo.com/"></a>
    </li>
    <li class="youtube" >
    <a href="http://youtube.com/"></a>
    </li>
</ul>
            
          
!

CSS

            
              .social-list {
  list-style-type: none;
  li {
    float: left;
    a {
      background-color: transparent;
      background-image: url(http://www.rgfx.net/del/social.png);
      background-position: 0 0;
      background-repeat: no-repeat;
      width: 29px;
      height: 28px;
      display: block;
    }
    &.facebook a {
      background-position: -29px 0;
    }
    &.twitter a {
      background-position: -58px 0;
    }
    &.vimeo a {
      background-position: -87px 0;
    }
    &.youtube a {
      background-position: -116px 0;
    }
  }
}
  

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................