<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>
@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;
color: #666;
text-shadow: rgba(255, 255, 255, 0.5) 0px 2px 3px;
transition: all 0.5s ease;
}
a[class^="icon-"]:hover:before {
text-shadow: rgba(0, 0, 0, 0.5) 0px 2px 3px;
}
.heading {
text-align: center;
}
.wrapper {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
font-size: 4em;
}
.wrapper .facebook {
position: relative;
}
.wrapper .facebook:before, .wrapper .facebook:after, .wrapper .facebook a:after {
font-family: 'FontAwesome';
content: "";
position: absolute;
color: rgba(240, 240, 240, 0.5);
display: block;
top: 0;
left: 0;
margin: auto;
}
.wrapper .facebook:before {
color: #787878;
}
.wrapper .facebook:after {
top: 2px;
left: 2px;
}
.wrapper .facebook a:after {
top: 1px;
left: 1px;
z-index: 1;
}
.wrapper .twitter {
position: relative;
}
.wrapper .twitter:before, .wrapper .twitter:after, .wrapper .twitter a:after {
font-family: 'FontAwesome';
content: "";
position: absolute;
color: rgba(240, 240, 240, 0.5);
display: block;
top: 0;
left: 0;
margin: auto;
}
.wrapper .twitter:before {
color: #787878;
}
.wrapper .twitter:after {
top: 2px;
left: 2px;
}
.wrapper .twitter a:after {
top: 1px;
left: 1px;
z-index: 1;
}
.wrapper .gplus {
position: relative;
}
.wrapper .gplus:before, .wrapper .gplus:after, .wrapper .gplus a:after {
font-family: 'FontAwesome';
content: "";
position: absolute;
color: rgba(240, 240, 240, 0.5);
display: block;
top: 0;
left: 0;
margin: auto;
}
.wrapper .gplus:before {
color: #787878;
}
.wrapper .gplus:after {
top: 2px;
left: 2px;
}
.wrapper .gplus a:after {
top: 1px;
left: 1px;
z-index: 1;
}
.wrapper .tumblr {
position: relative;
}
.wrapper .tumblr:before, .wrapper .tumblr:after, .wrapper .tumblr a:after {
font-family: 'FontAwesome';
content: "";
position: absolute;
color: rgba(240, 240, 240, 0.5);
display: block;
top: 0;
left: 0;
margin: auto;
}
.wrapper .tumblr:before {
color: #787878;
}
.wrapper .tumblr:after {
top: 2px;
left: 2px;
}
.wrapper .tumblr a:after {
top: 1px;
left: 1px;
z-index: 1;
}
.wrapper .pinterest {
position: relative;
}
.wrapper .pinterest:before, .wrapper .pinterest:after, .wrapper .pinterest a:after {
font-family: 'FontAwesome';
content: "";
position: absolute;
color: rgba(240, 240, 240, 0.5);
display: block;
top: 0;
left: 0;
margin: auto;
}
.wrapper .pinterest:before {
color: #787878;
}
.wrapper .pinterest:after {
top: 2px;
left: 2px;
}
.wrapper .pinterest a:after {
top: 1px;
left: 1px;
z-index: 1;
}
.wrapper .youtube {
position: relative;
}
.wrapper .youtube:before, .wrapper .youtube:after, .wrapper .youtube a:after {
font-family: 'FontAwesome';
content: "";
position: absolute;
color: rgba(240, 240, 240, 0.5);
display: block;
top: 0;
left: 0;
margin: auto;
}
.wrapper .youtube:before {
color: #787878;
}
.wrapper .youtube:after {
top: 2px;
left: 2px;
}
.wrapper .youtube a:after {
top: 1px;
left: 1px;
z-index: 1;
}
.wrapper .instagram {
position: relative;
}
.wrapper .instagram:before, .wrapper .instagram:after, .wrapper .instagram a:after {
font-family: 'FontAwesome';
content: "";
position: absolute;
color: rgba(240, 240, 240, 0.5);
display: block;
top: 0;
left: 0;
margin: auto;
}
.wrapper .instagram:before {
color: #787878;
}
.wrapper .instagram:after {
top: 2px;
left: 2px;
}
.wrapper .instagram a:after {
top: 1px;
left: 1px;
z-index: 1;
}
