Bootstrap Snippet Bootstrap framework snippet Colored Social icons 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.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<section class="module divider-bottom">
            <div class="container">
                <div class="row">
                    <div class="col-sm-8 col-sm-offset-2">
                        <h5 class="montserrat text-uppercase bottom-line">Default icons</h5>
                        <ul class="social-icons">
                            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                            <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                            <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                            <li><a href="#"><i class="fa fa-youtube"></i></a></li>
                            <li><a href="#"><i class="fa fa-instagram"></i></a></li>
                            <li><a href="#"><i class="fa fa-pinterest-p"></i></a></li>
                            <li><a href="#"><i class="fa fa-flickr"></i></a></li>
                            <li><a href="#"><i class="fa fa-tumblr"></i></a></li>
                            <li><a href="#"><i class="fa fa-foursquare"></i></a></li>
                            <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
                            <li><a href="#"><i class="fa fa-vine"></i></a></li>
                            <li><a href="#"><i class="fa fa-skype"></i></a></li>
                            <li><a href="#"><i class="fa fa-wordpress"></i></a></li>
                            <li><a href="#"><i class="fa fa-behance"></i></a></li>
                            <li><a href="#"><i class="fa fa-soundcloud"></i></a></li>
                            <li><a href="#"><i class="fa fa-stumbleupon"></i></a></li>
                            <li><a href="#"><i class="fa fa-deviantart"></i></a></li>
                            <li><a href="#"><i class="fa fa-yahoo"></i></a></li>
                            <li><a href="#"><i class="fa fa-digg"></i></a></li>
                            <li><a href="#"><i class="fa fa-github"></i></a></li>
                            <li><a href="#"><i class="fa fa-lastfm"></i></a></li>
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{margin-top:20px;}
/*------------------------------------------------------------------
[Social Icons]
*/
.social-icons {
    list-style: none;
    padding: 0;
    margin: 0;
}
.social-icons > li {
    display: inline-block;
}
.social-icons > li > a {
    background: #f5f5f5;
    display: block;
    margin: 0 8px 8px 0;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
    height: 32px;
    width: 32px;
    color: #777777;
}
.social-icons > li > a:hover,
.social-icons > li > a:focus {
    background: #27CBC0;
    color: #ffffff;
}
/* --- [ Social Icons Size ] --- */
.social-icons-lg > li > a {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

" Bootstrap framework snippet Colored Social icons "
Bootstrap 3.0.0 Snippet by harunpehlivan

Related: See More

Questions / Comments:

" Bootstrap framework snippet Colored Social icons " Bootstrap 3.0.0 Snippet by harunpehlivan

Related: See More

Questions / Comments:

" Bootstrap framework snippet Colored Social icons "
Bootstrap 3.0.0 Snippet by harunpehlivan