Learn how to add Social Icons with Font Awesome

Font Awesome Social Icons

<link rel='stylesheet' href='https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css?ver=4.4.0' type='text/css' media='all'/>
<style type="text/css">
.gkprofile
ul {
    overflow: auto;
}
 
.gkprofile ul li {
    list-style-type: none;
    float: left;
}
 
.gkprofile ul li a i {
    background: #dd4b39;
    color: #fff;
    width: 45px;
    height: 33px;
    font-size: 24px;
    text-align: center;
    margin-right: 12px;
    padding-top: 16%;
    transition: all 0.2s ease-in-out;
}

.gkprofile .fa-facebook {
    background:#3b5998
} 
.gkprofile .fa-linkedin {
    background:#007bb6
}
.gkprofile .fa-twitter {
    background:#00aced
}
.gkprofile .google-plus {
    background:#dd4b39
}
.gkprofile .fa-youtube {
    background:#e52d27
}
.gkprofile ul li a i:hover {
    opacity: .7;
}
</style>
<div class="gkprofile">
<ul>
<li><a title="Like on Facebook" href="https://www.facebook.com/your_id"><i class="fa fa-facebook"></i></a></li>
<li><a title="Subscribe on YouTube" href="https://www.youtube.com/channel/your_id"><i class="fa fa-youtube"></i></a></li>
<li><a title="Follow on Twitter" href="https://twitter.com/your_id"><i class="fa fa-twitter"></i></a></li>
<li><a title="Join on Google+" href="https://plus.google.com/+your_id"><i class="fa fa-google-plus"></i>
<p></a></li>
</ul>
</div>

Instruction

1. Copy above code in notepad
2. Update social account links
3. Place in text/html widget.