<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>

@import 'https://fonts.googleapis.com/css?family=Share+Tech+Mono';

@import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css';

$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 {
    background-image: linear-gradient(45deg, rgba(194, 233, 221, 0.5) 1%, rgba(104, 119, 132, 0.5) 100%), linear-gradient(-45deg, #494d71 0%, rgba(217, 230, 185, 0.5) 80%);
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social {
    border-radius: 5px;
    padding: 10px;
    background: white;
    min-width: 60vw;
    max-width: 80vw;
    box-shadow:0 2px 3px rgba(71, 71, 71, 0.31);
    margin: 0;
    list-style: none outside none;
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1376484/jess-harding-lqT6NAmTaiY-unsplash.jpg'),radial-gradient(#28a3dd, #0d7751);
      background-size: cover;
      background-position: center;
      font-family: "Share Tech Mono", monospace;
      background-blend-mode: multiply,screen, overlay;
  
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 10px;
  
  li {
    margin: 0;
    padding: 0;
    list-style: none outside none;
  
  }
  
    a {
        background: linear-gradient(0deg, rgba(188, 29, 102, .058), rgba(0, 155, 42, .023));
        display: inline-flex;
        min-height: 40px;
        min-width: 150px;
        border-radius: 3px;
        align-items: center;
        width: 100%;
        text-decoration: none;
        padding: 10px 15px;
        box-sizing: border-box;
        color: #fff;
        font-size: 1.5rem;
        white-space: nowrap;
      text-shadow: 1px 1px 1px rgba(0,0,0,.35);
      box-shadow: 1px 1px 1px rgba(0,0,0,.35), inset 1px 1px 3px rgba(0,0,0,.15);
    }
}

[class^="icon-"]::before{
  display: block;
  content: '';
  width: 32px;
  height: 32px;
  margin-right: 10px;
  background: url(https://www.w3cplus.com/sites/default/files/blogs/2015/1506/sprite1.svg) no-repeat;
}

@for $i from 1 through length($icons){
  .icon-#{nth($icons,$i)}{
    &::before {
      background-position: 0  -1 * (($i - 1) * 42px);
    }
  } 
}