Edit in JSFiddle

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="icons-container">
    <div class="social-icons spinned">
        <a class="item facebook" href="#"><em class="fa fa-facebook"></em></a>
        <a class="item twitter" href="#"><em class="fa fa-twitter"></em></a>
        <a class="item google" href="#"><em class="fa fa-google"></em></a>
        <a class="item linkedin" href="#"><em class="fa fa-linkedin"></em></a>
        <a class="item instagram" href="#"><em class="fa fa-instagram"></em></a>
    </div>
</div>
/* -------------------------------- 

Primary style

-------------------------------- */
*, *::after, *::before {
  box-sizing: border-box;
}

html {
  font-size: 18px;
}

body {
  font-size: 18px;
  color: #333;
  background-color: #fff;
}

a {
  color: #26a69a;
  text-decoration: none;
}

/* -------------------------------- 

Main Components 

-------------------------------- */
.icons-container{
    height: 100px;
    width: 400px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -200px;
}

.social-icons .item {
    display: inline-block;
    margin: 5px;
    width: 50px;
    height: 50px;
    transition: .3s all;
    position: relative;
    -webkit-transition: .3s all;
    text-align: center;
    color: #fff;
    background-color: #fff;
    line-height: 48px;
    border-radius: 50px;
    -webkit-box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15);
    -moz-box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15);
    box-shadow: 0px 5px 11px 0px rgba(0,0,0,0.18), 0px 4px 15px 0px rgba(0,0,0,0.15);
}

.social-icons.spinned .item:hover {
    -webkit-animation: Social-Icons-Flipping .3s;
    animation: Social-Icons-Flipping .3s
}
.social-icons .item:hover {
    text-decoration: none;
    background-color: #42474E;
    box-shadow: 0 -1px 0 transparent inset, 0 2px 3px rgba(0, 0, 0, .1), 0 4px 8px rgba(0, 0, 0, .3);
    color: #fff!important
}
.social-icons .item .fa {
    font-size: 15px;
    font-weight: 500;
}

.social-icons .facebook {
    color: #425F9C!important
}
.social-icons .twitter {
    color: #00ACEE!important
}
.social-icons .google {
    color: #c00!important
}
.social-icons .linkedin {
    color: #0073B2!important
}
.social-icons .youtube {
    color: #EB3E40!important
}
.social-icons .instagram {
    color: #5E8AAC!important
}

.facebook:hover {
    background-color: #425F9C!important
}
.twitter:hover {
    background-color: #00ACEE!important
}
.google:hover {
    background-color: #c00!important
}
.linkedin:hover {
    background-color: #0073B2!important
}
.youtube:hover {
    background-color: #EB3E40!important
}
.instagram:hover {
    background-color: #5E8AAC!important
}

@-webkit-keyframes Social-Icons-Flipping {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}
@keyframes Social-Icons-Flipping {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}