<ul class="social-icons">
    <li><a href="" class="social-icon"> <i class="facebook"></i></a></li>
    <li><a href="" class="social-icon"> <i class="youtube"></i></a></li>
    <li><a href="" class="social-icon"> <i class="twitter"></i></a></li>
    <li><a href="" class="social-icon"> <i class="instagram"></i></a></li>

    </ul>
    </div>

body {
   font-family: 'Lato', sans-serif;
   color: #FFF;
   background: #322f30;
   -webkit-font-smoothing: antialiased;
   }

  a {
text-decoration: none;
color: #fff;
}

p > a:hover{
color: #d9d9d9;
text-decoration:  underline;
}

ul {
padding:0;
list-style: none;
}

.footer-social-icons {
width: 350px;
display:block;
margin: 0 auto;
}

.social-icon {
color: #fff;
 }

 ul.social-icons {
 margin-top: 630px;
 margin-left: -30px;

 }


.social-icons li {
vertical-align: top;
display: inline;
height: 100%;
margin-left: 50px;
}

.social-icons a {
color: #fff;
text-decoration: none;
}

.facebook {
widht:150px;
height:150px;
padding:2px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
background: url(../img/fb.png) no-repeat;
background-size:20px 20px;

 }

.facebook:hover {
background:url(../img/fb2.png) no-repeat;
background-size:20px 20px;
widht:150px;
height:150px;
}

.youtube {
widht:150px;
height:150px;
padding:2px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
background: url(../img/yt.png) no-repeat;
background-size:20px 20px;


}

.youtube:hover {
background:url(../img/yt2.png) no-repeat;
background-size:20px 20px;
widht:150px;
height:150px;
}

.twitter {
widht:150px;
height:150px;
padding:2px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
background: url(../img/tt.png) no-repeat;
background-size:20px 20px;

}

 .twitter:hover {
  background:url(../img/tt2.png) no-repeat;
  background-size:20px 20px;
  widht:150px;
  height:150px;
  }


.instagram {
widht:150px;
height:150px;
padding:2px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
background: url(../img/insta.png) no-repeat;
background-size:20px 20px;

 }
  .instagram:hover {
background:url(../img/insta2.png) no-repeat;
background-size:20px 20px;
widht:150px;
height:150px;
 }