<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<!-------I Will Use this above CDN link only for adding/display Fontawesome 5 Icons--------->
<div class="container">
<div class="row">
<ul>
<li><a href="#" title="Facebook"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#" title="Twitter"><i class="fab fa-twitter"></i></a></li>
<li><a href="#" title="Google +"><i class="fab fa-google-plus-g"></i></a></li>
<li><a href="#" title="Linkedin"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
</div>
ul {
padding: 0;
list-style: none;
margin: 30px auto;
}
ul li {
display: inline-block;
margin: 0 10px 0 0;
}
ul li a {
padding: 1rem;
background-color: #D3D3D3;
border-radius: 50%;
text-align: center;
width: 50px;
height: 50px;
font-size: 20px;
display: inline-block;
line-height:0px;
}
ul li a i {
color: #000;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition: 0.5s;
}
ul li a:hover i {
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
