<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 ---------->
<aside id="sticky-social">
<ul>
<li><a href="#" class="entypo-facebook" target="_blank"><span>Facebook</span></a></li>
<li><a href="#" class="entypo-twitter" target="_blank"><span>Twitter</span></a></li>
<li><a href="#" class="entypo-gplus" target="_blank"><span>Google+</span></a></li>
<li><a href="#" class="entypo-linkedin" target="_blank"><span>LinkedIn</span></a></li>
<li><a href="#" class="entypo-instagrem" target="_blank"><span>Instagram</span></a></li>
<li><a href="#" class="entypo-stumbleupon" target="_blank"><span>StumbleUpon</span></a></li>
<li><a href="#" class="entypo-pinterest" target="_blank"><span>Pinterest</span></a></li>
<li><a href="#" class="entypo-flickr" target="_blank"><span>Flickr</span></a></li>
<li><a href="#" class="entypo-tumblr" target="_blank"><span>Tumblr</span></a></li>
</ul>
</aside>
@import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before {
font-family: "entypo", sans-serif;
}
a {
text-decoration: none;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.container {
margin: 0 auto;
padding: 20px 50px;
background: white;
}
#sticky-social {
left: 0;
position: fixed;
top: 150px;
}
#sticky-social a {
background: #333;
color: #fff;
display: block;
height: 35px;
font: 16px "Open Sans", sans-serif;
line-height: 35px;
position: relative;
text-align: center;
width: 35px;
}
#sticky-social a span {
line-height: 35px;
left: -120px;
position: absolute;
text-align:center;
width:120px;
}
#sticky-social a:hover span {
left: 100%;
}
#sticky-social a[class*="facebook"],
#sticky-social a[class*="facebook"]:hover,
#sticky-social a[class*="facebook"] span { background: #3b5998; }
#sticky-social a[class*="twitter"],
#sticky-social a[class*="twitter"]:hover,
#sticky-social a[class*="twitter"] span { background: #00aced; }
#sticky-social a[class*="gplus"],
#sticky-social a[class*="gplus"]:hover,
#sticky-social a[class*="gplus"] span { background: #dd4b39; }
#sticky-social a[class*="linkedin"],
#sticky-social a[class*="linkedin"]:hover,
#sticky-social a[class*="linkedin"] span { background: #007bb6; }
#sticky-social a[class*="instagrem"],
#sticky-social a[class*="instagrem"]:hover,
#sticky-social a[class*="instagrem"] span { background: #517fa4; }
#sticky-social a[class*="stumbleupon"],
#sticky-social a[class*="stumbleupon"]:hover,
#sticky-social a[class*="stumbleupon"] span { background: #eb4924; }
#sticky-social a[class*="pinterest"],
#sticky-social a[class*="pinterest"]:hover,
#sticky-social a[class*="pinterest"] span { background: #cc2127; }
#sticky-social a[class*="flickr"],
#sticky-social a[class*="flickr"]:hover,
#sticky-social a[class*="flickr"] span { background: #ff0084; }
#sticky-social a[class*="tumblr"],
#sticky-social a[class*="tumblr"]:hover,
#sticky-social a[class*="tumblr"] span { background: #32506d; }
