<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="socialBar">
<a href="#" title="Facebook"><i class="ico FbIcon"><img src="http://i224.photobucket.com/albums/dd65/etaguile/Facebook_zpsjtffnhpc.png"></i></a>
<a href="#" title="Instagram"><i class="ico IgIcon"><img src="http://i224.photobucket.com/albums/dd65/etaguile/Instagram_zpsxd1y4jrr.png"></i></a>
<a href="#" title="Youtube"><i class="ico YtIcon"><img src="http://i224.photobucket.com/albums/dd65/etaguile/Youtube_zpsukjqxwxm.png"></i></a>
<a href="#" title="Skype"><i class="ico SkIcon"><img src="http://i224.photobucket.com/albums/dd65/etaguile/Skype_zpsynhtoecv.png"></i></a>
</div>
body { /*JUST FOR TEST, YOU CAN REMOVE IT*/
height: 6000px;
background-color: #A6A6A6;
}
.socialBar { /*JUST FOR POSITIONING THE SOCIAL DIV: CENTERED RIGHT*/
position: fixed;
right: 0px; /*THIS WILL TAKE YOU A MARGIN FROM RIGHT*/
top: 50%; /*CENTER THE DIV, DO NOT EDIT*/
transform: translate(0%, -50%); /*CENTER THE DIV, DO NOT EDIT*/
-webkit-transform: translate(0%, -50%); /*CENTER THE DIV, DO NOT EDIT*/
-moz-transform: translate(0%, -50%); /*CENTER THE DIV, DO NOT EDIT*/
-o-transform: translate(0%, -50%); /*CENTER THE DIV, DO NOT EDIT*/
background-color: #303030; /*WHATEVER COLOR THAT YOU WANT*/
}
.socialBar .ico {
display: block; /*VERTICAL POSITION*/
padding: 8px; /*DO NOT EDIT, MAINTAINS THE CORRECT SIZE FOR BACKGROUND COLOR*/
}
.socialBar:hover .ico { /*JUST ANIMATION, YOU CAN REMOVE IT IF YOU WANT A FAST COLOR CHANGE*/
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.socialBar .FbIcon:hover { /*THIS MAKES A COLOR CHANGE*/
background-color: #3B5998;
}
.socialBar .IgIcon:hover {
background-color: #FFD140;
}
.socialBar .YtIcon:hover {
background-color: #BF221F;
}
.socialBar .SkIcon:hover {
background-color: #2AA4E9;
}
