<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/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <div class="socialmedia"> <div class="row"> <div class="col-md-12" id="positionicon"> <div> <ul> <li class="fbstyle"> <i class="fa fa-facebook-square" aria-hidden="true"></i> </li> <li class="instastyle"> <i class="fa fa-instagram" aria-hidden="true"></i> </li> <li class="linkedinstyle"> <i class="fa fa-linkedin" aria-hidden="true"></i> </li> </ul> </div> </div> </div> </div> <div class="container-fluid heading"> <div class="row"> <div class="col-md-12 text-center"> <h1>Social Media Float</h1> </div> </div> </div> <div class="container mainpd"> <div class="row"> <div class="three"> <p>If you want the floating icons of social media icons you can use the code it is mobile responsive also</p> </div> <div class="two"> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum corrupti hic doloribus ratione! Omnis ipsam blanditiis officia quaerat doloribus? Dignissimos labore voluptatibus ex corrupti, porro accusantium beatae alias veritatis soluta accusamus ut delectus similique doloribus itaque facilis expedita sequi modi, ducimus eligendi mollitia ullam harum quis. Sit architecto praesentium expedita quis, quia ex eum nobis corporis, nemo modi aperiam. Esse vitae corporis reiciendis omnis ipsam, officia ipsum enim eos possimus quod nemo dicta excepturi cum amet sunt eum nobis debitis ducimus maiores itaque sapiente unde porro. Aliquam magnam sint magni voluptatibus in doloribus nobis quod inventore, amet, atque, non dignissimos. </p> </div> </div> </div>

body { background-color: #000 !important; } h1 { text-align: center; color: #fff; } p { color: #fff; } #positionicon { position: fixed; top: 200px; } #positionicon p { color: red; } .socialmedia ul { list-style-type: none; padding: 3px; } .socialmedia li { margin: inherit; } /* Facebook Style Starts Here */ .fbstyle { background-color: #fff; border-radius: 50%; width: 51px; } .fa-facebook-square { color: blue; font-size: 30px !important; padding: 10px; margin-left: 3px; } /* Facebook style ends Here */ /* Instagram Style Starts Here */ .fa-instagram { color: red; font-size: 30px !important; padding: 10px; margin-left: 3px; } .instastyle { background-color: #fff; border-radius: 50%; width: 51px; } /* Instagram Style ends Here */ /* Linkedin styling starts*/ .fa-linkedin { color: rgb(226, 223, 43); font-size: 28px !important; padding: 10px; margin-left: 3px; } .linkedinstyle { background-color: #fff; border-radius: 50%; width: 51px; } /* Linkedin Style Ends */ .fa-instagram:hover { color: #fff; } .instastyle:hover { background-color: brown; border-radius: 50%; width: 51px; transform: scale(1.5); margin-left: 20px; } .fa-facebook-square:hover { color: #000; } .fbstyle:hover { background-color: burlywood; border-radius: 50%; width: 51px; transform: scale(1.5); margin-left: 20px; } .linkedinstyle:hover { background-color: rgb(39, 89, 170); border-radius: 50%; width: 51px; transform: scale(1.5); margin-left: 20px; } @media(min-width:300px) { .container { width: 68% !important; } }