Instantly share code, notes, and snippets.
-
Save 16892434/44291d39f59d3703bf861e8334e4262b to your computer and use it in GitHub Desktop.
HTML Code for Bootstrap Social Media Icons
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<head><!--HTML Head Start--> | |
<title>Bootstrap 3 Social Media Icons Tutorial</title> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<!--Load Bootstrap css--> | |
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> | |
<!--load font awesome--> | |
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> | |
</head><!--HTML Head End--> | |
<div class="social"><!--HTML Body Start--> | |
<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><!--HTML Body Start--> | |
<!--Css start--> | |
.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 { /* round facebook icon*/ | |
background: #4060A5; | |
} | |
.social .fa-twitter:hover { /* round twitter icon*/ | |
background: #00ABE3; | |
} | |
.social .fa-google-plus:hover { /* round google plus icon*/ | |
background: #e64522; | |
} | |
.social .fa-github:hover { /* round github icon*/ | |
background: #343434; | |
} | |
.social .fa-pinterest:hover { /* round pinterest icon*/ | |
background: #cb2027; | |
} | |
.social .fa-linkedin:hover { /* round linkedin icon*/ | |
background: #0094BC; | |
} | |
.social .fa-flickr:hover { /* round flickr icon*/ | |
background: #FF57AE; | |
} | |
.social .fa-instagram:hover { /* round instagram icon*/ | |
background: #375989; | |
} | |
.social .fa-vimeo-square:hover { /* round vimeo square icon*/ | |
background: #83DAEB; | |
} | |
.social .fa-stack-overflow:hover { /* round stack overflow icon*/ | |
background: #FEA501; | |
} | |
.social .fa-dropbox:hover { /* round dropbox icon*/ | |
background: #017FE5; | |
} | |
.social .fa-tumblr:hover { /* round tumblr icon*/ | |
background: #3a5876; | |
} | |
.social .fa-dribbble:hover { /* round dribble icon*/ | |
background: #F46899; | |
} | |
.social .fa-skype:hover { /* round skype icon*/ | |
background: #00C6FF; | |
} | |
.social .fa-stack-exchange:hover { /* round stack exchange icon*/ | |
background: #4D86C9; | |
} | |
.social .fa-youtube:hover { /* round youtube icon*/ | |
background: #FF1F25; | |
} | |
.social .fa-xing:hover { /* round xing icon*/ | |
background: #005C5E; | |
} | |
.social .fa-rss:hover { /* round rss icon*/ | |
background: #e88845; | |
} | |
.social .fa-foursquare:hover { /* round foursquare icon*/ | |
background: #09B9E0; | |
} | |
.social .fa-youtube-play:hover { /* round youtube play button icon*/ | |
background: #DF192A; | |
} | |
<!--Css start--> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment