<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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="container"> <div class="row"> <div class="social"> <a href="" class="link facebook"><span class="fa fa-facebook-square"></span></a> <a href="" class="link twitter"><span class="fa fa-twitter"></span></a> <a href="" class="link google-plus"><span class="fa fa-google-plus-square"></span></a> </div> </div> </div>

body{ background: #fff; margin: 0 auto; text-align: center; padding: 130px; } a.link.facebook { background: #355496; display: inline-block; height: 50px; width: 50px; border-radius: 50%; color: #fff; font-size: 30px; transform: translateY(-50%); } a.link.twitter { background-color: #00ACEE; display: inline-block; height: 50px; width: 50px; border-radius: 50%; color: #fff; font-size: 30px; transform: translateY(-50%); } a.link.google-plus{ background-color: #ff6347; display: inline-block; height: 50px; width: 50px; border-radius: 50%; color: #fff; font-size: 30px; transform: translateY(-50%); } span{ padding-top:10px; } span:hover{ transition: 0.9s; transform: rotateY(180deg); }