December 7, 2021

Social icon

<div class="social-icon">
                                   <ul>
                                       <li><a class="facebook" href="#"><i class="fa fa-facebook"></i></a></li>
                                       <li><a class="twitter" href="#"><i class="fa fa-twitter"></i></a></li>
                                       <li><a class="instagram" href="#"><i class="fa fa-instagram"></i></a></li>
                                       <li><a class="googleplus" href="#"><i class="fa fa-google-plus"></i></a></li>
                                       <li><a class="dribbble" href="#"><i class="fa fa-dribbble"></i></a></li>
                                   </ul>
                               </div>

 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        body {background: #333; margin: 0; padding: 0;}
        .social-icon {
    margin-top: 22px; display: inline-block; 
}
.social-icon ul li {
    display: inline-block;
    list-style: outside none none;
    margin: 0 8px 10px 0;
}
.social-icon li a {
    border-radius: 50px;
    color: #fff;
    display: inline-block;
    font-size: 18px;
    height: 38px;
    line-height: 36px;
    text-align: center;
    width: 38px;
}
.social-icon li a.facebook {
    background-color: #3c5b9b;
    border: 2px solid #3c5b9b;
}
.social-icon li a.twitter {
    background-color: #40c1df;
    border: 2px solid #40c1df;
}
.social-icon li a.instagram {
    background-color: #c619b8;
    border: 2px solid #c619b8;
}
.social-icon li a.googleplus {
    background-color: #ed3c32;
    border: 2px solid #ed3c32;
}
.social-icon li a.rss {
    background-color: #eb8314;
    border: 2px solid #eb8314;
}
.social-icon li a.dribbble {
    background-color: #c72982;
    border: 2px solid #c72982;
}
.social-icon li a.dribbble:hover {
    background-color: #fff;
    border: 2px solid #fff;
    color: #c72982;
}
.social-icon li a.rss:hover {
    background-color: #fff;
    border: 2px solid #fff;
    color: #eb8314;
}
.social-icon li a.googleplus:hover {
    background-color: #fff;
    border: 2px solid #fff;
    color: #ed3c32;
}
.social-icon li a.instagram:hover {
    background-color: #fff;
    border: 2px solid #fff;
    color: #c619b8;
}
.social-icon li a.twitter:hover {
    background-color: #fff;
    border: 2px solid #fff;
    color: #40c1df;
}
.social-icon li a.facebook:hover {
    background-color: #fff;
    border: 2px solid #fff;
    color: #3c5b9b;
}

    </style>

 

Leave a Reply

Your email address will not be published. Required fields are marked *