"footer social icon"
Bootstrap 3.0.0 Snippet by jeevan123456

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.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 ----------> <div class="bigpixi-footer-social"> <ul> <li class="bigpixi-footer-social__list-item"> <a class="bigpixi-footer__icon-link" rel="nofollow" href="https://twitter.com/"> <img class="bigpixi-footer-social__icon" alt="Twitter" title="Twitter" src="http://simpleicons.org/icons/twitter.svg"> </a> </li> <li class="bigpixi-footer-social__list-item"> <a class="bigpixi-footer__icon-link" rel="nofollow" href="https://www.facebook.com/"> <img class="bigpixi-footer-social__icon" alt="Facebook" title="Facebook" src="http://simpleicons.org/icons/facebook.svg"> </a> </li> <li class="bigpixi-footer-social__list-item"> <a class="bigpixi-footer__icon-link" rel="nofollow" href="https://www.youtube.com/"> <img class="bigpixi-footer-social__icon" alt="YouTube" title="YouTube" src="http://simpleicons.org/icons/youtube.svg"> </a> </li> <li class="bigpixi-footer-social__list-item"> <a class="bigpixi-footer__icon-link" rel="nofollow" href="https://www.instagram.com/"> <img class="bigpixi-footer-social__icon" alt="Instagram" title="Instagram" src="http://simpleicons.org/icons/instagram.svg"> </a> </li> <li class="bigpixi-footer-social__list-item"> <a class="bigpixi-footer__icon-link" rel="nofollow" href="https://www.pinterest.com/"> <img class="bigpixi-footer-social__icon" alt="Pinterest" title="Pinterest" src="http://simpleicons.org/icons/pinterest.svg"> </a> </li> </ul> </div>
.bigpixi-footer-social { margin-left: auto; margin-top: 8px; } .bigpixi-footer-social__list-item { display: inline-block; margin-left: 16px; } .bigpixi-footer__icon-link { display: inline-block; -webkit-transition: 0.1s cubic-bezier(0.39, 0.575, 0.565, 1); transition: 0.1s cubic-bezier(0.39, 0.575, 0.565, 1); -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; transition-property: opacity, transform; transition-property: opacity, transform, -webkit-transform; } .bigpixi-footer-social__icon { display: inline-block; height: 32px; width: 32px; } .bigpixi-footer-social__icon:hover { display: inline-block; height: 32px; width: 32px; border: 1px solid #e2e2e2; padding: 2px; transition : .2s; }

Related: See More


Questions / Comments: