<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<nav class="nav icon-set">
<div class="container">
<ul class="nav navbar-nav">
<li class="facebook"><a href="#" data-toggle="tooltip" title="Facebook"><i class="fa fa-facebook fa-lg"></i></a></li>
<li class="twitter"><a href="#" data-toggle="tooltip" title="Twitter"><i class="fa fa-twitter fa-lg"></i></a></li>
<li class="instagram"><a href="#" data-toggle="tooltip" title="Instagram"><i class="fa fa-instagram fa-lg"></i></a></li>
<li class="linkedin"><a href="#" data-toggle="tooltip" title="LinkedIn"><i class="fa fa-linkedin fa-lg"></i></a></li>
</ul>
</div>
</nav>
.icon-set{
background: #237f52;
}
.fa {
color: #fff;
}
.nav > li.facebook > a:hover {
background: #3b5998 !important;
}
.nav > li.twitter > a:hover {
background: #55acee !important;
}
.nav > li.instagram > a:hover {
background: #405de6;
background: -webkit-linear-gradient(left top, #405de6, #833ab4, #fd1d1d, #f56040, #fcaf45);
background: -o-linear-gradient(bottom right, #405de6, #833ab4, #fd1d1d, #f56040, #fcaf45);
background: -moz-linear-gradient(bottom right, #405de6, #833ab4, #fd1d1d, #f56040, #fcaf45);
background: linear-gradient(to bottom right, #405de6, #833ab4, #fd1d1d, #f56040, #fcaf45);
}
.nav > li.linkedin > a:hover {
background: #0077b5 !important;
}
.navbar-nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
}
