Social Media Icons

by oktaviardi pratama

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="social">
    <i class="fa fa-facebook"></i>
    <i class="fa fa-google-plus"></i>
    <i class="fa fa-twitter"></i>    
    <i class="fa fa-reddit"></i>
    <i class="fa fa-envelope"></i>
</div>

<div class="social-rounded">
    <i class="fa fa-facebook"></i>
    <i class="fa fa-google-plus"></i>
    <i class="fa fa-twitter"></i>    
    <i class="fa fa-reddit"></i>
    <i class="fa fa-envelope"></i>
</div>

<div class="social-bar">
    <i class="fa fa-facebook"></i>
    <i class="fa fa-google-plus"></i>
    <i class="fa fa-twitter"></i>    
    <i class="fa fa-reddit"></i>
    <i class="fa fa-envelope"></i>
</div>

<div class="social-left">
    <i class="fa fa-facebook"></i>
    <i class="fa fa-google-plus"></i>
    <i class="fa fa-twitter"></i>    
    <i class="fa fa-reddit"></i>
    <i class="fa fa-envelope"></i>
    <span><i class="fa fa-caret-left"></i></span>
</div>

CSS

div{margin-top: 15px;}
div.social i, div.social-rounded i, div.social-bar i{opacity: .65; font-size: 28px; padding: 0 5px; 
    -moz-transition: all .5s; -o-transition: all .5s; -webkit-transition: all .5s; transition: all .5s;}
            div.social i:hover{text-shadow: grey 6px 4px 4px; cursor: pointer; opacity: 1;}
            div.social i.fa-facebook{color: #3B5998;}
            div.social i.fa-google-plus{color: #dd4b39;}
            div.social i.fa-twitter{color: #55acee;}
            div.social i.fa-reddit{color: #ff4500}
            div.social i.fa-envelope{color: #738a8d}

div.social-rounded i{border-radius: 50%; width: 35px; height: 44px; line-height: 44px; text-align: center; color: #fff; cursor: pointer;}
div.social-rounded i:hover{opacity: 1;
-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	transform: rotate(360deg);}
            div.social-rounded i.fa-facebook{background-color: #3B5998;}
            div.social-rounded i.fa-google-plus{background-color: #dd4b39;}
            div.social-rounded i.fa-twitter{background-color: #55acee;}
            div.social-rounded i.fa-reddit{background-color: #ff4500}
            div.social-rounded i.fa-envelope{background-color: #738a8d}

div.social-bar i{width: 36px; height: 40px; line-height: 40px; text-align: center; color: #fff; margin: -2px; z-index: 1; cursor: pointer;}
div.social-bar i:hover{opacity: 1; transform: scale(1.2); z-index: 999999 !important; margin-right: 2px;}
            div.social-bar i.fa-facebook{background-color: #3B5998;}
            div.social-bar i.fa-google-plus{background-color: #dd4b39;}
            div.social-bar i.fa-twitter{background-color: #55acee;}
            div.social-bar i.fa-reddit{background-color: #ff4500}
            div.social-bar i.fa-envelope{background-color: #738a8d}


div.social-left{position: absolute; left: 0; width: 46px; margin-top: 45px; transition: all...

JavaScript

$(function(){        
    $("div.social-left").delegate("i.fa-caret-left", "click", function(){
        $("div.social-left").addClass("hidden");
        $(this).removeClass("fa-caret-left");
        $(this).addClass("fa-caret-right");
    });
    
    $("div.social-left").delegate("i.fa-caret-right", "click", function(){
        $("div.social-left").removeClass("hidden");
        $(this).addClass("fa-caret-left");
        $(this).removeClass("fa-caret-right");
    });    
});