<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 ----------> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <footer class="footer"> <div class="container"> <ul class="social-icon animate pull-right"> <li><a href="#" title="facebook" target="_blank"><i class="fa fa-facebook"></i></a></li> <!-- change the link to social page and edit title--> <li><a href="#" title="twitter" target="_blank"><i class="fa fa-twitter"></i></a></li> <li><a href="#" title="google plus" target="_blank"><i class="fa fa-google-plus"></i></a></li> </ul> </div> </footer>

body{background-color: #fff;} .social-icon { list-style: none; padding: 0; margin: 0; } .social-icon li{ display: inline-block; text-align: center; } .social-icon a { display: block; width: 44px; height: 44px; line-height: 44px; border-radius: 50%; margin-right: 5px; } .social-icon a { background: rgba(255, 255, 255, 0.85); /* social icon background color */ color: #000; /* social icon color */ } .social-icon a:hover { background: rgba(255, 255, 255, 0.25); /* social icon hover background color */ color: #fff; /* social icon hover color */ } .footer { position: absolute; bottom: 0; padding-top: 5px; width: 100%; height: 60px; background-color: #000; }