<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"> <div class="text-center"> <h2>Sticky social media icons</h2> </div> <div class="social_media_div"> <ul class="icons_list"> <li> <a href="javascript:void(0)"><i class="facebook-icon fab fa-facebook-f"></i></a> </li> <li> <a href="javascript:void(0)"><i class="googleplus-icon fab fa-google-plus-g"></i></a> </li> <li> <a href="javascript:void(0)"><i class="linkedin-icon fab fa-linkedin-in"></i></a> </li> <li> <a href="javascript:void(0)"><i class="twitter-icon fab fa-twitter"></i></a> </li> <li> <a href="javascript:void(0)"><i class="instagram-icon fab fa-instagram"></i></a> </li> </ul> </div>

body{ background-color: aliceblue; height: 800px; } .text-center{ text-align: center; font-weight:normal; } .social_media_div{ position:fixed; left:-30px; top: 130px; } .social_media_div li{ list-style: none; margin: 15px 0px; } .social_media_div li a i{ text-decoration: none; padding: 18px 21px; color: #fff; font-size: 16px; border-radius: 30px; font-weight: bold; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; -ms-transition: all 0.4s; transition: all 0.4s; } .facebook-icon{ background-color: #5DADE2; border: 1px solid #5DADE2; box-shadow: 0px 2px 4px 4px #ccd9e2; } .googleplus-icon{ background-color: #EC7063; border: 1px solid #EC7063; box-shadow: 0px 2px 4px 4px #e2d1cf; font-size: 16px !important; padding: 18px 17px !important; } .linkedin-icon{ background-color: #82c5f3; border: 1px solid #82c5f3; box-shadow: 0px 2px 4px 4px #c9d7e0; } .twitter-icon{ background-color: #AED6F1; border: 1px solid #AED6F1; box-shadow: 0px 2px 4px 4px #ccd9e2; } .instagram-icon{ background-color: #A569BD; border: 1px solid #A569BD; box-shadow: 0px 2px 4px 4px #ddcfe2; } .social_media_div li a:hover i{ -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -ms--transform: rotate(360deg); transform: rotate(360deg); -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; -ms-transition: all 0.4s; transition: all 0.4s; }