Font Awesome Social Links http://www.ohdesigner.com/font-awesome/

style.css

/*
CSS for Social Links using Font Awesome
*/

.fa {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
}
.fa-facebook:before{content:"\f09a"}
.fa-facebook-square:before{content:"\f082"}
.fa-twitter:before{content:"\f099"}
.fa-twitter-square:before{content:"\f081"}
.fa-google-plus:before{content:"\f0d5"}
.fa-google-plus-square:before{content:"\f0d4"}
.fa-pinterest:before{content:"\f0d2"}
.fa-pinterest-square:before{content:"\f0d3"}

.social {
    background-color: #64b2d6;
    display: inline-block;
    text-align: left;
    color: #444;
}

.social li a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
.social li a i {
    color: #fff;
    font-size: 14px;
}

.social li a {
    color: #444;
    background-color: transparent;
    display: block;
    height: 40px;
    padding-top: 10px;
    text-align: center;
    transition: all 0.2s ease 0s;
    width: 40px;
}

.list-inline > li {
    display: inline-block;
}

.list-inline {
    list-style: outside none none;
}

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