<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<style>
ul.social-network {
list-style: none;
display: inline;
margin-left:0 !important;
padding: 0;
}
ul.social-network li {
display: inline;
margin: 0 5px;
}
.social-network a.icoRss:hover {
background-color: #F56505;
}
.social-network a.icoFacebook:hover {
background-color:#98111D;
}
.social-network a.icoTwitter:hover {
background-color:#60BD30;
}
.social-network a.icoGoogle:hover {
background-color:#FF0C1E;
}
.social-network a.icoVimeo:hover {
background-color:#351FB8;
}
.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: 50px;
height: 50px;
font-size:20px;
}
.social-circle li i {
margin:0;
line-height:50px;
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;
}
</style>
</head>
<body>
<div class="col-md-12">
<ul class="social-network social-circle" >
<li><a href="http://www.phpjavascript.com/" class="icoRss" title="Rss"><i class="fa fa-rss"></i></a></li>
<li><a href="http://www.phpjavascript.com/" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="http://www.phpjavascript.com/" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="http://www.phpjavascript.com/" class="icoGoogle" title="Google +"><i class="fa fa-google-plus"></i></a></li>
<li><a href="http://www.phpjavascript.com/" class="icoLinkedin" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</body>
</html>
Note: Browser version that fully supports the property.
property--transition
-webkit-google chrome
-moz-mozilla firefox
-o-opera
<head>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<style>
ul.social-network {
list-style: none;
display: inline;
margin-left:0 !important;
padding: 0;
}
ul.social-network li {
display: inline;
margin: 0 5px;
}
.social-network a.icoRss:hover {
background-color: #F56505;
}
.social-network a.icoFacebook:hover {
background-color:#98111D;
}
.social-network a.icoTwitter:hover {
background-color:#60BD30;
}
.social-network a.icoGoogle:hover {
background-color:#FF0C1E;
}
.social-network a.icoVimeo:hover {
background-color:#351FB8;
}
.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: 50px;
height: 50px;
font-size:20px;
}
.social-circle li i {
margin:0;
line-height:50px;
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;
}
</style>
</head>
<body>
<div class="col-md-12">
<ul class="social-network social-circle" >
<li><a href="http://www.phpjavascript.com/" class="icoRss" title="Rss"><i class="fa fa-rss"></i></a></li>
<li><a href="http://www.phpjavascript.com/" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="http://www.phpjavascript.com/" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="http://www.phpjavascript.com/" class="icoGoogle" title="Google +"><i class="fa fa-google-plus"></i></a></li>
<li><a href="http://www.phpjavascript.com/" class="icoLinkedin" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</body>
</html>
Note: Browser version that fully supports the property.
property--transition
-webkit-google chrome
-moz-mozilla firefox
-o-opera
Output:
