Instantly share code, notes, and snippets.
Created
May 9, 2015 05:08
-
Save mamun94/a83a4655f276d2243998 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