<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 ----------> <!---add link into header font fontawesome---> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="container"> <h2>social icons</h2> <div class="row"> <ul class="social-icons-ql"> <li><a href="#"><i class="fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-linkedin"></i></a></li> <li><a href="#"><i class="fa fa-google-plus"></i></a></li> <li><a href="#"><i class="fa fa-pinterest"></i></a></li> <li><a href="#"><i class="fa fa-reddit"></i></a></li> <li><a href="#"><i class="fa fa-stumbleupon"></i></a></li> </ul> </div> </div>

/* CSS Document */ .social-icons-ql li{ list-style:none; float:left; width:40px; height:40px; line-height:45px; background:#000; text-align:center; margin:10px 5px; } .social-icons-ql li:nth-child(1){ width:50px; height:50px; line-height:57px; margin:5px 5px; background:#34558E; } .social-icons-ql li:nth-child(1) i{ font-size:25px; } .social-icons-ql li:nth-child(2) { background:#25B8E6;#0198DE } .social-icons-ql li:nth-child(3) { background:rgba(0, 122, 181, 1); } .social-icons-ql li:nth-child(4) { background:#DC4A38; } .social-icons-ql li:nth-child(5) { background:#CC2028; } .social-icons-ql li:nth-child(6) { background:#E05929; } .social-icons-ql li:nth-child(7) { background:#EB4924; } .social-icons-ql li i{ color:#fff; font-size:20px; }