Font Icon | Social Media Example

<!-- Facebook -->
<a class="social-media-icon facebook" href="https://www.facebook.com/SkyLight.Animation/">
    <span class="fab fa-facebook"></span>
</a>
<!-- Twitter -->
<a class="social-media-icon twitter" href="https://twitter.com/skylight_army/">
    <span class="fab fa-twitter"></span>
</a>
<!-- Blogger -->
<a class="social-media-icon blogger" href="https://www.blogger.com/profile/03276135074953517475">
    <span class="fab fa-blogger"></span>
</a>
<!-- Instagram -->
<a class="social-media-icon instagram" href="#">
    <span class="fab fa-instagram"></span>
</a>

<style type="text/css">
    .social-media-icon {
        padding: 2px 3px 1px 3px;
        background: #222;
        color: #fff;
        margin: 5px;
        border-radius: 4px;
    }
    a.social-media-icon:hover{
        background: #fff!important;
        color: #222!important;
    }
    .facebook{
        background:  #3c5a98!important;
    }
    .twitter{
        background: #1da1f2!important;
    }
    .blogger{
        background: #ff5722!important;;
    }
    .instagram{
        background: #262626!important;;
    }
</style>