"Facebook, Twitter icons"
Bootstrap 3.3.0 Snippet by mclord

Post to Facebook Tweet this

<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 ----------> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> </head> <div class="container"> <div class="row"> <h2>Facebook, twitter, google and instagram social icons</h2> </div> <div class="center"> <ul class="social-network social-circle"> <li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li> <li><a href="#" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li> <li><a href="#" class="icoGoogle" title="Google +"><i class="fa fa-google-plus"></i></a></li> <li><a href="#" class="icoInstagram" title="Instagram"><i class="fa fa-instagram" aria-hidden="true"></i></a></li> </ul> </div> </div> </html>
/*footer social icons */ ul.social-network { list-style: none; display: inline; margin-left:0 !important; padding: 0; } ul.social-network li { display: inline; margin: 0 5px; } /*footer social icons */ .social-network a.icoRss:hover { background-color: #F56505; } .social-network a.icoFacebook:hover { background-color:#3B5998; } .social-network a.icoTwitter:hover { background-color:#33ccff; } .social-network a.icoGoogle:hover { background-color:#BD3518; } .social-network a.icoVimeo:hover { background-color:#0590B8; } .social-network a.icoLinkedin:hover { background-color:#007bb7; } .social-network a.icoInstagram:hover { background-color: orangered; } .social-network a.icoRss:hover i, .social-network a.icoFacebook:hover i, .social-network a.icoTwitter:hover i, .social-network a.icoGoogle:hover i, .social-network a.icoVimeo:hover i, .social-network a.icoLinkedin:hover i, .social-network a.icoInstagram:hover i { color:#fff; } a.socialIcon:hover, .socialHoverClass { color:#44BCDD; } .social-circle 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: 50px; height: 50px; font-size:20px; } .social-circle li i { margin:0; line-height:50px; text-align: center; } .social-circle 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; } .social-circle i { color: black; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -o-transition: all 0.8s; -ms-transition: all 0.8s; transition: all 0.8s; } a { background-color: #fff; }

Related: See More

Paper Kit 2 Angular
Twitter Profile Card
Spinning social icons

Questions / Comments: