HTML
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>
<div class="container">
<div class="row">
<div class="col-md-2">
<h2>SOCIAL ICONS WITH NICE EFFECTS and <br /> unusual position</h2>
<div class="col-md-0 .col-md-offset-1">
<ul class="social">
<li class="facebook"><a href="https://www.facebook.com/cesarnog"><i class="fa fa-facebook fa-3x"></i></a></li>
<li class="twitter"><a href="http://twitter.com/cesarnogcps"><i class="fa fa-twitter fa-3x"></i></a></li>
<li class="pinterest"><a href="http://www.pinterest.com/cesanog/"><i class="fa fa-pinterest-p fa-3x"></i></a></li>
<li class="behance"><a href="https://www.behance.net/cesarnog"><i class="fa fa-behance fa-3x"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2>You can edit this CSS if you want<br /> and if you need.</h2>
<div class="col-md-6 .col-md-offset-3">
<ul class="social">
<li class="facebook"><a href="https://www.facebook.com/cesarnog"><i class="fa fa-facebook fa-3x"></i></a></li>
<li class="twitter"><a href="http://twitter.com/cesarnogcps"><i class="fa fa-twitter fa-3x"></i></a></li>
<li class="behance2"><a href="https://www.behance.net/xpto"><i class="fa fa-behance fa-3x"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2>Every Simple to USE <br /> with FONT AWESOME</h2>
<div class="col-md-6 .col-md-offset-3">
<ul class="social">
<li class="facebook2"><a href="https://www.facebook.com/cesarnog"><i class="fa fa-facebook fa-3x"></i></a></li>
<li class="twitter2"><a href="http://twitter.com/cesarnogcps"><i class="fa fa-twitter fa-3x"></i></a></li>
<li class="behance3"><a href="https://www.behance.net/Kurnikowa"><i class="fa fa-behance fa-3x"></i></a></li>
</ul>
</div>
</div>
<h2>ENJOY!</h2><i class="fa fa-angellist fa-4x"></i>
</div>
</div>
CSS
body{padding: 0px 150px; text-align: center; font-family: 'Shadows Into Light', cursive; font-size: 30px;}
h2{
font-size: 55px;
}
.social {
position: relative;
height: 3em;
width: 13.5em;
margin: 150px 300px;
}
.social li {
display: block;
height: 4em;
line-height: 4em;
margin: -2.2em;
position: absolute;
-webkit-transition: -webkit-transform .7s;
-moz-transition: -moz-transform .7s;
-ms-transition: -ms-transform .7s;
-o-transition: -o-transform .7s;
transition: transform .7s;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
text-align: center;
width: 4em;
}
.social a {
color: #fffdf0;
display: block;
height: 4em;
line-height: 6em;
text-align: center;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
width: 4em;
}
.social li:hover {
-webkit-transform: scale(1.3,1.3) rotate(45deg);
-moz-transform: scale(1.3,1.3) rotate(45deg);
-ms-transform: scale(1.3,1.3) rotate(45deg);
-o-transform: scale(1.3,1.3) rotate(45deg);
transform: scale(1.3,1.3) rotate(45deg);
}
.facebook {
background: #155b9d;
left: 0;
top: 0%;
}
.twitter {
background: #1a9ec4;
bottom: 0;
left: 25%;
}
.facebook2 {
background: #155b9d;
left: 50%;
top: 0%;
}
.twitter2 {
background: #1a9ec4;
bottom: 0;
left: 25%;
}
.pinterest {
background: #e11a30;
left: 50%;
top: 0%;
}
.behance {
background: #3f7aa3;
bottom: 0;
left: 75%;
}
.behance2 {
background: #3f7aa3;
top: 0%;
left: 50%;
}
.behance3 {
background: #3f7aa3;
bottom: 0;
left: 75%;
}
