<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="//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.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <div class=""> <h2>Social Media</h2> <div class="listing-block"> <div class="orion-family"> Become a part of our family<br/> <span>Speak To</span> <div class="pt-2 pb-2"><i class="fa fa-whatsapp"></i> +91-7568543012</div> <div class="pb-2">Follow us!</div> </div> <ul class="list-inline"> <li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook-f"></i></a></li> <li><a href="#" class="icotwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li> <li><a href="#" class="icogoogle-plus" title="Google Plus"><i class="fa fa-google-plus"></i></a></li> <li><a href="#" class="icolinkedin" title="Facebook"><i class="fa fa-linkedin"></i></a></li> </ul> </div> </div>

.listing-block .list-inline { padding-left: 0; margin-left: -5px; list-style: none; } .listing-block .list-inline>li { display: inline-block; padding-right: 5px; padding-left: 5px; } .listing-block .list-inline>li a { display: inline-block; position: relative; margin: 0 auto 0 auto; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; text-align: center; width:40px; height:40px; font-size: 20px; } .listing-block .list-inline a.icoFacebook:hover { background-color: #3B5998; } .listing-block .list-inline a.icotwitter:hover { background-color: #0084b4; } .listing-block .list-inline a.icogoogle-plus:hover { background-color:#dd4b39; } .listing-block .list-inline a.icolinkedin:hover { background-color:#0077B5; } .listing-block .list-inline>li a:hover i, .triggeredHover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -ms--transform: rotate(360deg); transform: rotate(360deg); -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; transition: all 0.2s; } .listing-block .list-inline li i { margin: 0; line-height:40px; text-align: center; } .listing-block .list-inline .social-circle i { color: #fff; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -o-transition: all 0.8s; -ms-transition: all 0.8s; transition: all 0.8s; } .listing-block .list-inline a { color:#fff; background-color:#818182; }