"Social Media Badges"
Bootstrap 3.3.0 Snippet by sparkktv

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@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;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

Awesome! Thanks for sharing.

SercanGEZER () - 6 years ago - Reply 0