"Spinning social icons"
Bootstrap 3.3.0 Snippet by JGoodwillieV

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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 ---------->
<!--Pulling Awesome Font -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="col-md-12">
<ul class="social-network social-circle">
<li><a href="#" class="icoRss" title="Rss"><i class="fa fa-rss"></i></a></li>
<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="icoGoogle" title="Google +"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" class="icoLinkedin" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
</ul>
</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
/*=========================
Icons
================= */
/* 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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Black Dashboard
Bootstrap Social Card
Navbar with Social icon & Dropdown
social network layout - bootstrap 4

Questions / Comments:

If you dont see icons just download font awesome and then put them in your css folder also add to head <link href="css/font-awesome.css" rel="stylesheet">

Amadeusz Krawczyk () - 7 years ago - Reply 0

Very helpful thanks a lot

Kenshinman () - 7 years ago - Reply 0

must i add my own icon ??? because the circle appear but not the icons... Where are they ??? :/

Sylvain rozieres () - 8 years ago - Reply 0

circle css:
moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
icon : add fontawesome.io

PancalMubal () - 7 years ago - Reply 0

it was very helpful thanks the information was very helpful keep posting helpful articles.can go through my websites for more details www.sandhuwebcrawlers.co.in

Jass Sandhu () - 8 years ago - Reply 0

thank man! very beneficial for me

junior onana () - 8 years ago - Reply 0

Need youtube in same style. Any help or suggestions? (Thanks!)

Daniel Siddall () - 8 years ago - Reply 0

Daniel I can help you if you still need help

Peter Mitchel () - 8 years ago - Reply 0

add this code to the html
<li></li>

Dennis Kussener () - 8 years ago - Reply 0

Thanks man really helped me out,

Ricardo () - 9 years ago - Reply 0

I cant get the social icons to display properly, any ideas?

Kevin () - 9 years ago - Reply 0

Guys, you must download Fontawesome library (CSS + FONTS) from here --> http://fontawesome.io/
then add it to your project and enjoy! in the website you will find everything.

Badr () - 7 years ago - Reply 0

do you success ? i'm in the same case

Sylvain rozieres () - 8 years ago - Reply 0

do you success ? i'm in the same case

Adjie' () - 8 years ago - Reply 0

Saw something similar here http://funtranslations.com. Has a spin on few elements. Nice way to keep the users engaged.

Vasu () - 9 years ago - Reply 0