"Social Icon Strip Footer"
Bootstrap 3.3.0 Snippet by ConnerT

<!-- Social Footer, Colour Matching Icons --> <!-- Include Font Awesome Stylesheet in Header --> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous"> <!-- // --> <div class="container"> <h3>Multi-Coloured</h3> <hr> <div class="text-center center-block"> <p class="txt-railway">- Bootsnipp.com -</p> <br /> <a href="https://www.facebook.com/bootsnipp"><i id="social-fb" class="fa fa-facebook-square fa-3x social"></i></a> <a href="https://twitter.com/bootsnipp"><i id="social-tw" class="fa fa-twitter-square fa-3x social"></i></a> <a href="https://plus.google.com/+Bootsnipp-page"><i id="social-gp" class="fa fa-google-plus-square fa-3x social"></i></a> <a href="mailto:bootsnipp@gmail.com"><i id="social-em" class="fa fa-envelope-square fa-3x social"></i></a> </div> <hr> </div> <br /> <!-- Social Footer, Single Coloured --> <!-- Include Font Awesome Stylesheet in Header --> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <!-- // --> <div class="container"> <h3>Single Coloured</h3> <hr /> <div class="text-center center-block"> <p class="txt-railway">- Bootsnipp.com -</p> <br /> <a href="https://www.facebook.com/bootsnipp"><i class="fa fa-facebook-square fa-3x social"></i></a> <a href="https://twitter.com/bootsnipp"><i class="fa fa-twitter-square fa-3x social"></i></a> <a href="https://plus.google.com/+Bootsnipp-page"><i class="fa fa-google-plus-square fa-3x social"></i></a> <a href="mailto:bootsnipp@gmail.com"><i class="fa fa-envelope-square fa-3x social"></i></a> </div> <hr /> </div>
.social:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); } .social { -webkit-transform: scale(0.8); /* Browser Variations: */ -moz-transform: scale(0.8); -o-transform: scale(0.8); -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; } /* Multicoloured Hover Variations */ #social-fb:hover { color: #3B5998; } #social-tw:hover { color: #4099FF; } #social-gp:hover { color: #d34836; } #social-em:hover { color: #f39c12; }

Similar snippets: See More


Comments:

Sam Su 2014-08-06 09:24:28
    The text "Bootsnipp.com" will also render shaking-like / flashing during the animation. Maybe a classic bug of the CSS3's animation?
Anon 2014-08-08 14:53:58
    This doesn't seem to be a problem in Chrome, but here on Firefox (31) I'm noticing the shaking. Something is buggy for sure.
Stanescu Eduard-Dan 2014-09-06 14:15:36
    It's easy to fix the bug. :-)
patman 2015-02-20 20:39:50
    well that was really helpful
anon 2014-08-16 08:00:54
    IDs are unique; you should switch the `social` ID to a class.
Brian van Vlymen 2014-09-27 02:25:24
    so amazing !
cangrejero 2014-11-10 12:40:43
    Is there any compatibility issue with iPad. My wife indicates that the buttons don't work on that platform. Thanks!
grga 2014-12-17 02:01:12
    this doesn't validate; duplicate social ID... does anyone have a fix?
ConnerT 2015-08-31 09:17:35
    Hi, I have edited the snippet so that ID's are unique and the .social class affects all the webkit transformations.
alex dykyi 2014-12-21 23:24:30
    bk,ln
WorldWideWatcher 2015-01-08 16:20:08
    very nice , why not add others social icons : linkedin , foursquare , ... and so on ? is there any update for that ?
dana 2015-03-31 13:33:01
    fantastic job !!
roska541 2015-05-08 19:24:22
    Can't get it work! any recommendations ? the Icons do not show after putting the html and css
Vince 2015-05-14 20:38:09
    Doesn't work on Safari browser
nsamba vicent 2015-06-09 12:59:21
    its cool
WonderingWhy 2016-09-28 10:01:49
    i copied the html and css, how come it doesnt show me any of the facebook/gmail or other icons?
WAR 2016-10-31 10:00:40
    not working on firefox but it is working fine in chrome can someone help me??
Alexandra 2017-02-09 02:00:57
    Can anyone please tell me what "txt-railway" does? i can't find it anywhere

Commenting will be back soon.