Bootstrap Social Icons with FontAwesome and nice effect hover


	<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-12">
		<h2>SOCIAL ICONS WITH NICE EFFECTS and<br> unusual position</h2>
                            <div class="col-md-6 .col-md-offset-3">
                                 <ul class="social">
                                  <li class="facebook"><a href="http://facebook.com/alterowo"><i class="fa fa-facebook fa-3x"></i></a></li>
                                  <li class="twitter"><a href="http://twitter.com/Kyokushinowa"><i class="fa fa-twitter fa-3x"></i></a></li>
                                  <li class="pinterest"><a href="http://www.pinterest.com/beatagibalska/"><i class="fa fa-pinterest-p fa-3x"></i></a></li>
                                  <li class="behance"><a href="https://www.behance.net/Kurnikowa"><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="http://facebook.com/alterowo"><i class="fa fa-facebook fa-3x"></i></a></li>
                                  <li class="twitter"><a href="http://twitter.com/Kyokushinowa"><i class="fa fa-twitter fa-3x"></i></a></li>
                                  <li class="behance2"><a href="https://www.behance.net/Kurnikowa"><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="http://facebook.com/alterowo"><i class="fa fa-facebook fa-3x"></i></a></li>
                                  <li class="twitter2"><a href="http://twitter.com/Kyokushinowa"><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>

	<script type="text/javascript">
	
	</script>

    body{padding: 10px 250px; 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 450px;
}

.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%;
}