<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 ---------->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
<h1 class="page-header">
Animated Social Media Icons
</h1>
<p>
You can add the animated social media icons to your website for linking to your social media channels.
</p>
<br />
<!-- *-*-*-*-*-*-*-*-*-*-*-* ANIMATED ICONS *-*-*-*-*-*-*-*-*-*-*-* -->
<div class="col-md-12">
<ul class="social-network social-circle">
<li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="icoLinkedin" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" class="icoGoogle" title="Google +"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" class="icoRss" title="Rss"><i class="fa fa-rss"></i></a></li>
</ul>
</div>
</div>
/* footer social icons */
ul.social-network {
list-style: none;
display: inline;
margin-left: 0 !important;
padding: 0;
}
ul.social-network li {
display: inline;
margin: 0 5px;
}
/* footer social icons */
.social-network a.icoRss:hover {
background-color: #F56505;
}
.social-network a.icoFacebook:hover {
background-color: #3B5998;
}
.social-network a.icoTwitter:hover {
background-color: #33ccff;
}
.social-network a.icoGoogle:hover {
background-color: #BD3518;
}
.social-network a.icoVimeo:hover {
background-color: #0590B8;
}
.social-network a.icoLinkedin:hover {
background-color: #007bb7;
}
.social-network a.icoRss:hover i,
.social-network a.icoFacebook:hover i,
.social-network a.icoTwitter:hover i,
.social-network a.icoGoogle:hover i,
.social-network a.icoVimeo:hover i,
.social-network a.icoLinkedin:hover i {
color: #fff;
}
a.socialIcon:hover,
.socialHoverClass {
color: #44BCDD;
}
.social-circle li a {
display: inline-block;
position: relative;
margin: 0 auto 0 auto;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
text-align: center;
width: 40px;
height: 40px;
font-size: 20px;
}
.social-circle li i {
margin: 0;
line-height: 40px;
text-align: center;
}
.social-circle li a:hover i,
.triggeredHover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms--transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
transition: all 0.2s;
}
.social-circle i {
color: #fff;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-o-transition: all 0.8s;
-ms-transition: all 0.8s;
transition: all 0.8s;
}
a {
background-color: #D3D3D3;
}
window.alert = function() {};
var defaultCSS = document.getElementById('bootstrap-css');
function changeCSS(css) {
if (css) $('head > link').filter(':first').replaceWith('<link rel="stylesheet" href="' + css + '" type="text/css" />');
else $('head > link').filter(':first').replaceWith(defaultCSS);
}
$(document).ready(function() {
var iframe_height = parseInt($('html').height());
window.parent.postMessage(iframe_height, 'http://bootsnipp.com');
});
