<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 ----------> <div> <a href="#"><i class="fa fa-facebook" aria-hidden="true" style="font-size: 15px;"></i></a> <a href="#"><i class="fa fa-google-plus" aria-hidden="true" style="font-size: 15px;"></i></a> <a href="#"><i class="fa fa-twitter" aria-hidden="true" style="font-size: 15px;"></i></a> <a href="#"><i class="fa fa-linkedin" aria-hidden="true" style="font-size: 15px;"></i></a> </div>

.fa-facebook,.fa-google-plus,.fa-twitter,.fa-linkedin{ background-color: #fff; border-radius: 50%; margin: 15px 2px; border: 2px solid #fff; } .fa-facebook:hover,.fa-google-plus:hover,.fa-twitter:hover,.fa-linkedin:hover{ background-color: transparent; -webkit-transition: background 1.5s; /* Safari */ transition: background 1.5s; color: #fff; -webkit-animation: rotation 1s infinite linear; animation-iteration-count: 1; } @-webkit-keyframes rotation { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); } } .fa-facebook:hover{ border: 2px solid #3b5999; } .fa-google-plus:hover{ border: 2px solid #d34836; } .fa-twitter:hover{ border: 2px solid #1da1f3; } .fa-linkedin:hover{ border: 2px solid #0077b5; } .fa-facebook{ padding: 8px 11px; color: #3b5999; } .fa-google-plus{ padding: 8px 6px; color: #d34836; } .fa-twitter{ padding: 8px 8px; color: #1da1f3; } .fa-linkedin{ padding: 7.5px 9px; color: #0077b5; }