Social icons llinks

HTML

<ul class="social-media-icons">
  <li>
    <a class="twitter" href=""></a>
  </li>
  <li>
    <a class="facebook" href=""></a>
  </li>
  <li>
    <a class="googleplus" href="##"></a>
  </li>
  <li>
    <a class="pinterest" href=""></a>
  </li>
  <li>
    <a class="email" href="##"></a>
  </li>
  <li>
    <a class="youtube" href="##"></a>
  </li>
</ul>
<style>

.social-media-icons {
  list-style: none;
  margin 0;
  padding: 0;
}



.social-media-icons li {
  display: inline-block;
}



.social-media-icons a {
  background-image: url(http://image.prntscr.com/image/d262116113704134b50f6fbd9e101a23.png);
  /* background-image: url(../img/social-icons.svg), none; */
  background-repeat: no-repeat;
  display: block;
  height: 60px;
  transition: all 350ms ease-out;
  -webkit-transition: all 350ms ease-out;
  -o-transition: all 350ms ease-out;
  width: 55px;
}

.social-media-icons a:hover {
  filter: alpha(opacity=80);
  opacity: 0.8;
}


/* Move the background to the right position for each social network */

.twitter {
  background-position: -5px -2px;
  /* Obviously, this is obsolete to use here, but it illustrates the fact the twitter image is the first image */
}

.facebook {
  background-position: -59px 0;
}

.dribbble {
  background-position: -106px 0;
}

.googleplus {
  background-position: -112px -62px;
}

.pinterest {
  background-position: -165px -1px;
}

.email {
  background-position: -5px -2px;
}

.youtube {
  background-position: -59px -121px;
}

.social-media-icons a.youtube:hover {
}

.social-media-icons a.googleplus:hover {
}

</style>