"Social Media Badges"
Bootstrap 3.3.0 Snippet by sparkktv

<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="appbadges"> <a href="/social-connect"> <li class="app-store facebook"> <span class="fa fa-facebook fa-2x app-store-icon"></span> <h1>Facebook</h1> </li> <li class="app-store twitter"> <span class="fa fa-twitter fa-2x app-store-icon"></span> <h1>Twitter</h1> </li> <li class="app-store pinterest"> <span class="fa fa-pinterest fa-2x app-store-icon"></span> <h1>Pinterest</h1> </li> <li class="app-store instagram"> <span class="fa fa-instagram fa-2x app-store-icon"></span> <h1>Instagram</h1> </li> <li class="app-store googleplus"> <span class="fa fa-google-plus fa-2x app-store-icon"></span> <h1>Google Plus</h1> </li> <li class="app-store youtube"> <span class="fa fa-youtube fa-2x app-store-icon"></span> <h1>YouTube</h1> </li> <li class="app-store medium"> <span class="fa fa-medium fa-2x app-store-icon"></span> <h1>Medium</h1> </li> <li class="app-store tumblr"> <span class="fa fa-tumblr fa-2x app-store-icon"></span> <h1>Tumblr</h1> </li></a> </div>
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,300,100); @import url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css); .app-store{display:inline-flex;padding:0 10px !important;} .app-store-icon{padding:10px 0;padding-right:5px;} .appbadges h1 {margin-top:15px;font-size:20px;line-height:20px;font-weight:100;} .appbadges{text-align:center;color:#bebebe;border-top:solid 1px #cccccc;} .appbadges a{color:#bebebe !important;} .appbadges .facebook:hover{color:#3b5998;} .appbadges .twitter:hover{color:#1da1f2;} .appbadges .pinterest:hover{color:#bd081c;} .appbadges .instagram:hover{color:#833ab4;} .appbadges .googleplus:hover{color:#dd4b39;} .appbadges .youtube:hover{color:#ff0000;} .appbadges .medium:hover{color:#00ab6c;} .appbadges .tumblr:hover{color:#35465c;}

Related: See More


Questions / Comments:

Awesome! Thanks for sharing.

SercanGEZER () - 6 years ago - Reply 0