<h1>分享:</h1>
<ul class="social">
  <li><a href="##" class="icon-google-plus">Google Plus</a></li>
  <li><a href="##" class="icon-facebook">Facebook</a></li>
  <li><a href="##" class="icon-twitter">Twitter</a></li>
  <li><a href="##" class="icon-feed">Feed</a></li>
  <li><a href="##" class="icon-youtube">Youtube</a></li>
  <li><a href="##" class="icon-vimeo">Vimeo</a></li>
  <li><a href="##" class="icon-lanyrd">Lanyrd</a></li>
  <li><a href="##" class="icon-forrst">Forrst</a></li>
  <li><a href="##" class="icon-deviantart">Deviantart</a></li>
  <li><a href="##" class="icon-steam">Steam</a></li>
  <li><a href="##" class="icon-github">Github</a></li>
  <li><a href="##" class="icon-wordpress">Wordpress</a></li>
  <li><a href="##" class="icon-blogger">Blogger</a></li>
  <li><a href="##" class="icon-tumblr">Tumblr</a></li>
  <li><a href="##" class="icon-soundcloud">Soundcloud</a></li>
  <li><a href="##" class="icon-linkedin">Linkedin</a></li>
  <li><a href="##" class="icon-lastfm">Lastfm</a></li>
  <li><a href="##" class="icon-delicious">Delicious</a></li>
  <li><a href="##" class="icon-stumbleupon">Stumbleupon</a></li>
  <li><a href="##" class="icon-pinterest">Pinterest</a></li>
  <li><a href="##" class="icon-xing">Xing</a></li>
  <li><a href="##" class="icon-flattr">Flattr</a></li>
</ul>
$icons: google-plus,facebook,twitter,feed,youtube,vimeo,lanyrd,forrst,deviantart,steam,github,wordpress,blogger,tumblr,soundcloud,linkedin,lastfm,delicious,stumbleupon,pinterest,xing,flattr;
body {
  font: 1.2em/1.5 Sans-serif;
  text-align: center;
  padding-top: 30px;
}
.social {
  list-style: none outside none;
  margin: 0 auto;
  padding: 0;
  width: 500px;
  
  li {
    display: inline-block;
    margin: 5px;
  }
  
  [class^="icon-"]{
    display: block;
    width: 64px;
    height: 64px;
    text-indent: 100%;
    overflow: hidden;
    white-space: nowrap;
    background: url(https://www.w3cplus.com/sites/default/files/blogs/2015/1506/sprite1.svg) no-repeat;
    background-size: 64px 2080px;
    
    @for $i from 1 through length($icons){
      &.icon-#{nth($icons,$i)}{
        background-position: 0  -2 * (($i - 1) * 42px);
      } 
    }
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.