"Spinning social icons"
Bootstrap 3.3.0 Snippet by JGoodwillieV

<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 ----------> <!--Pulling Awesome Font --> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <div class="col-md-12"> <ul class="social-network social-circle"> <li><a href="#" class="icoRss" title="Rss"><i class="fa fa-rss"></i></a></li> <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="icoLinkedin" title="Linkedin"><i class="fa fa-linkedin"></i></a></li> </ul> </div>
/*========================= Icons ================= */ /* 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.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 { 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: #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; } a { background-color: #D3D3D3; }

Related: See More


Questions / Comments:

If you dont see icons just download font awesome and then put them in your css folder also add to head <link href="css/font-awesome.css" rel="stylesheet">

Amadeusz Krawczyk () - 6 years ago - Reply 0


Very helpful thanks a lot

Kenshinman () - 6 years ago - Reply 0


must i add my own icon ??? because the circle appear but not the icons... Where are they ??? :/

Sylvain rozieres () - 7 years ago - Reply 0


circle css:
moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
icon : add fontawesome.io

PancalMubal () - 6 years ago - Reply 0


it was very helpful thanks the information was very helpful keep posting helpful articles.can go through my websites for more details www.sandhuwebcrawlers.co.in

Jass Sandhu () - 7 years ago - Reply 0


thank man! very beneficial for me

junior onana () - 7 years ago - Reply 0


Need youtube in same style. Any help or suggestions? (Thanks!)

Daniel Siddall () - 7 years ago - Reply 0


Daniel I can help you if you still need help

Peter Mitchel () - 7 years ago - Reply 0


add this code to the html
<li></li>

Dennis Kussener () - 7 years ago - Reply 0


Thanks man really helped me out,

Ricardo () - 8 years ago - Reply 0


I cant get the social icons to display properly, any ideas?

Kevin () - 8 years ago - Reply 0


Guys, you must download Fontawesome library (CSS + FONTS) from here --> http://fontawesome.io/
then add it to your project and enjoy! in the website you will find everything.

Badr () - 6 years ago - Reply 0


do you success ? i'm in the same case

Sylvain rozieres () - 7 years ago - Reply 0


do you success ? i'm in the same case

Adjie' () - 7 years ago - Reply 0


Saw something similar here http://funtranslations.com. Has a spin on few elements. Nice way to keep the users engaged.

Vasu () - 8 years ago - Reply 0