<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 ----------> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <div class="container-fluid"> <div class="row"> <div class="sicon"> <div class="col-lg-1 col-md-1 col-sm-2 col-xs-3 text-center"> <div class="icon-circle"> <a href="#" class="ifacebook" title="Facebook"><i class="fa fa-facebook"></i></a> </div> </div> <div class="col-lg-1 col-md-1 col-sm-2 col-xs-3 text-center"> <div class="icon-circle"> <a href="#" class="itwittter" title="Twitter"><i class="fa fa-twitter"></i></a> </div> </div> <div class="col-lg-1 col-md-1 col-sm-2 col-xs-3 text-center"> <div class="icon-circle"> <a href="#" class="igoogle" title="Google+"><i class="fa fa-google-plus"></i></a> </div> </div> <div class="col-lg-1 col-md-1 col-sm-2 col-xs-3 text-center"> <div class="icon-circle"> <a href="#" class="iLinkedin" title="Linkedin"><i class="fa fa-linkedin"></i></a> </div> </div> </div> </div> </div>

body{ padding: 50px; } .icon-circle .fa{ font-size : 25px; color : #e84700; margin : 0 auto; height : 80px; width : 80px; border-radius : 50%; border :2px solid #e84700; line-height : 80px; cursor : pointer; -webkit-transition : all ease-in-out 0.35s; -moz-transition : all ease-in-out 0.35s; -o-transition : all ease-in-out 0.35s; -ms-transition : all ease-in-out 0.35s; transition : all ease-in-out 0.20s,background-color ease-in-out 0.05s; } .icon-circle .fa:hover{ background-color : #e84700; color : #fff; border : 1px solid #e84711; -moz-box-shadow : inset 0px 0px 0px 5px #ffffff; -o-box-shadow : inset 0px 0px 0px 5px #ffffff; -ms-box-shadow : inset 0px 0px 0px 5px #ffffff; -webkit-box-shadow : inset 0px 0px 0px 5px #ffffff; box-shadow : inset 0px 0px 0px 5px #ffffff; -ms-transform : scale(1.2,1.2); -webkit-transform : scale(1.2,1.2); -moz-transform : scale(1.2,1.2); -o-transform : scale(1.2,1.2); transform : scale(1.2,1.2); } .icon-circle i:before{ margin-left : 0px; font-size : 40px; } @media (min-width:320px) and (max-width:768px) { .icon-circle .fa{ font-size : 15px; color : #e84700; margin : 0 auto; height : 40px; width : 40px; border-radius : 50%; border :2px solid #e84700; line-height : 40px; cursor : pointer; -webkit-transition : all ease-in-out 0.35s; -moz-transition : all ease-in-out 0.35s; -o-transition : all ease-in-out 0.35s; -ms-transition : all ease-in-out 0.35s; transition : all ease-in-out 0.20s,background-color ease-in-out 0.05s; } .icon-circle .fa:hover{ background-color : #e84700; color : #fff; border : 1px solid #e84711; -moz-box-shadow : inset 0px 0px 0px 5px #ffffff; -o-box-shadow : inset 0px 0px 0px 5px #ffffff; -ms-box-shadow : inset 0px 0px 0px 5px #ffffff; -webkit-box-shadow : inset 0px 0px 0px 5px #ffffff; box-shadow : inset 0px 0px 0px 5px #ffffff; -ms-transform : scale(1.2,1.2); -webkit-transform : scale(1.2,1.2); -moz-transform : scale(1.2,1.2); -o-transform : scale(1.2,1.2); transform : scale(1.2,1.2); } .icon-circle i:before{ margin-left : 0px; font-size : 20px; } } .ifacebook .fa{ color :#3B5998; border :2px solid #3B5998; } .ifacebook .fa:hover{ background-color : #3B5998; color : #fff; border : 1px solid #3B5998; } .itwittter .fa{ color : #33ccff; border :2px solid #33ccff; } .itwittter .fa:hover{ background-color : #33ccff; color : #fff; border : 1px solid #33ccff; } .igoogle .fa{ color : #BD3518; border :2px solid #BD3518; } .igoogle .fa:hover{ background-color : #BD3518; color : #fff; border : 1px solid #BD3518; } .iLinkedin .fa{ color : #007bb7; border :2px solid #007bb7; } .iLinkedin .fa:hover{ background-color :#007bb7; color : #fff; border : 1px solid #007bb7; }