Bootstrap Snippet Social Icons with FontAwesome and nice effect hover using HTML CSS Bootstrap

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
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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">
<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>
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
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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Social Icons with FontAwesome and nice effect hover "
Bootstrap 3.2.0 Snippet by Listeral

Related: See More

Questions / Comments:

"Social Icons with FontAwesome and nice effect hover " Bootstrap 3.2.0 Snippet by Listeral

Related: See More

Questions / Comments:

"Social Icons with FontAwesome and nice effect hover "
Bootstrap 3.2.0 Snippet by Listeral