<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 ----------> <div class="container"> <div class="row"> <div class="social"> <ul> <li><a href="#"><i class="fa fa-lg fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-lg fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-lg fa-google-plus"></i></a></li> <li><a href="#"><i class="fa fa-lg fa-github"></i></a></li> <li><a href="#"><i class="fa fa-lg fa-pinterest"></i></a></li> <li><a href="#"><i class="fa fa-lg fa-linkedin"></i></a></li> <li><a href="#"><i class="fa fa-lg fa-flickr"></i></a></li> <li><a href="#"><i class="fa fa-lg fa-instagram"></i></a></li> <li><a href="#"><i class="fa fa-lg fa-vimeo-square"></i></a></li> <li><a href="#"><i class="fa fa-lg fa-stack-overflow"></i></a></li> <li><a href="#"><i class="fa fa-lg fa-dropbox"></i></a></li> <li><a href="#"><i class="fa fa-lg fa-tumblr"></i></a></li> <li><a href="#"><i class="fa fa-lg fa-dribbble"></i></a></li> <li><a href="#"><i class="fa fa-lg fa-skype"></i></a></li> <li><a href="#"><i class="fa fa-lg fa-stack-exchange"></i></a></li> <li><a href="#"><i class="fa fa-lg fa-youtube"></i></a></li> <li><a href="#"><i class="fa fa-lg fa-xing"></i></a></li> <li><a href="#"><i class="fa fa-lg fa-rss"></i></a></li> <li><a href="#"><i class="fa fa-lg fa-foursquare"></i></a></li> <li><a href="#"><i class="fa fa-lg fa-youtube-play"></i></a></li> </ul> </div> </div> </div>

@import "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"; .social { margin: 0; padding: 0; } .social ul { margin: 0; padding: 5px; } .social ul li { margin: 5px; list-style: none outside none; display: inline-block; } .social i { width: 40px; height: 40px; color: #FFF; background-color: #909AA0; font-size: 22px; text-align:center; padding-top: 12px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; transition: all ease 0.3s; -moz-transition: all ease 0.3s; -webkit-transition: all ease 0.3s; -o-transition: all ease 0.3s; -ms-transition: all ease 0.3s; } .social i:hover { color: #FFF; text-decoration: none; transition: all ease 0.3s; -moz-transition: all ease 0.3s; -webkit-transition: all ease 0.3s; -o-transition: all ease 0.3s; -ms-transition: all ease 0.3s; } .social .fa-facebook:hover { background: #4060A5; } .social .fa-twitter:hover { background: #00ABE3; } .social .fa-google-plus:hover { background: #e64522; } .social .fa-github:hover { background: #343434; } .social .fa-pinterest:hover { background: #cb2027; } .social .fa-linkedin:hover { background: #0094BC; } .social .fa-flickr:hover { background: #FF57AE; } .social .fa-instagram:hover { background: #375989; } .social .fa-vimeo-square:hover { background: #83DAEB; } .social .fa-stack-overflow:hover { background: #FEA501; } .social .fa-dropbox:hover { background: #017FE5; } .social .fa-tumblr:hover { background: #3a5876; } .social .fa-dribbble:hover { background: #F46899; } .social .fa-skype:hover { background: #00C6FF; } .social .fa-stack-exchange:hover { background: #4D86C9; } .social .fa-youtube:hover { background: #FF1F25; } .social .fa-xing:hover { background: #005C5E; } .social .fa-rss:hover { background: #e88845; } .social .fa-foursquare:hover { background: #09B9E0; } .social .fa-youtube-play:hover { background: #DF192A; }