Bootstrap Snippet social icon using HTML CSS

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<div class="icons">
  <a class="icon-facebook" href="#"></a><a class="icon-twitter" href="#"></a><a class="icon-google-plus" href="#"></a><a class="icon-tumblr" href="#"></a><a class="icon-pinterest" href="#"></a><a class="icon-youtube" href="#"></a><a class="icon-instagram" href="#"></a>
</div>
<h1 class="heading">
  Below is Cross Browser
</h1>
<div class="wrapper">
  <div class="facebook">
    <a href="#"></a>
  </div>
  <div class="twitter">
    <a href="#"></a>
  </div>
  <div class="gplus">
    <a href="#"></a>
  </div>
  <div class="tumblr">
    <a href="#"></a>
  </div>
  <div class="pinterest">
    <a href="#"></a>
  </div>
  <div class="youtube">
    <a href="#"></a>
  </div>
  <div class="instagram">
    <a href="#"></a>
  </div>
</div>
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
@charset "UTF-8";
html {
  height: 100%;
}
body {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  margin: 0;
  height: 100%;
  width: 100%;
  background-color: #CBCBCB;
}
a {
  text-decoration: none;
}
.icons {
  display: -webkit-flex;
  -webkit-flex-direction: row;
  -webkit-align-items: center;
  -webkit-justify-content: center;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
a {
  padding: .5em 1em;
}
a[class^="icon-"]:before {
  font-size: 5vw;
  background: -webkit-linear-gradient(top, #666, #666);
  /* so it doesn't show on non-webkit browsers */
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"social icon"
Bootstrap 3.3.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"social icon" Bootstrap 3.3.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"social icon"
Bootstrap 3.3.0 Snippet by evarevirus