Display Social Media Icons Horizontally In A Line

by Emmanuel Garcia

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<div class="footer-social-icons">
    <ul class="social-icons">
        <li><a  href="https://www.facebook.com/RaintreeVacationClub/" target="_blank" class="social-icon"> <span class="fa fa-facebook"></span></a></li>
        <li><a href="https://twitter.com/raintreeclub" target="_blank" class="social-icon"> <i class="fa fa-twitter"></i></a></li>
        <li><a href="https://www.instagram.com/raintreevacationclub/" target="_blank" class="social-icon"> <i class="fa fa-instagram"></i></a></li>
        <li><a href="https://www.youtube.com/user/raintreevacationclub" target="_blank" class="social-icon"> <i class="fa fa-youtube-play"></i></a></li>
        <li><a href="https://es.pinterest.com/RaintreeClub/" target="_blank" class="social-icon"> <i class="fa fa-pinterest-p"></i></a></li>
      
    </ul>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Lato);
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);


@media screen and (max-width: 480px) {
/* Styles */
.footer-social-icons ul {
   padding:0;
    list-style: none; 
    margin:0 auto;text-align: center;
}
}
@media screen and (min-width: 480px) {
.footer-social-icons ul {
    padding:0;
    list-style: none; 
    float:right
}}

.footer-social-icons {
    width: 100%;
    display:inline-block;
    line-height:45px;
}
.fa {
    color: #fff;  
}
ul.social-icons {
    margin-top: 0px;
}
.social-icons li {
    vertical-align: top;
    display: inline;
}
.social-icons a {
    color: #fff;
    text-decoration: none;	
}
.fa-facebook {
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #3d5b99;
}
.fa-facebook:hover {
    opacity: 0.5;
}
.fa-twitter {
    padding:10px 12px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #2aa2ef;
}
.fa-twitter:hover {
    opacity: 0.5;
}
.fa-instagram {
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background: radial-gradient(circle at 15% 100%, #FED373 4%, #F15245 25%, #D92E7F 55%, #9B36B7 75%, #515ECF);
}
.fa-instagram:hover {
  opacity: 0.5;
}
.fa-youtube-play {
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #fc0d1b; 
}
.fa-youtube-play:hover {
    opacity: 0.5;
}
.fa-pinterest-p {
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #C92228;
}
.fa-pinterest-p:hover {
   opacity: 0.5;
}