Bootstrap Snippet Animated Social Media Icons using HTML CSS Bootstrap jQuery

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
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
/* 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 {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
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');
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Animated Social Media Icons"
Bootstrap 3.3.0 Snippet by uxengineer

Related: See More

Questions / Comments:

"Animated Social Media Icons" Bootstrap 3.3.0 Snippet by uxengineer

Related: See More

Questions / Comments:

"Animated Social Media Icons"
Bootstrap 3.3.0 Snippet by uxengineer