Social Icon

Social links are displayed as icons

Social Icon 01

<div class="bg-dark py-4">
    <ul class="list-inline mb-0">
        <li class="list-inline-item mr-0">
            <a href="#" class="text-white opacity-3 fs-25 px-4 hover-white opacity-hover-10"><i
                    class="fab fa-twitter"></i></a>
        </li>
        <li class="list-inline-item mr-0">
            <a href="#" class="text-white opacity-3 fs-25 px-4 hover-white opacity-hover-10"><i
                    class="fab fa-facebook-f"></i></a>
        </li>
        <li class="list-inline-item mr-0">
            <a href="#" class="text-white opacity-3 fs-25 px-4 hover-white opacity-hover-10"><i
                    class="fab fa-skype"></i></a>
        </li>
        <li class="list-inline-item mr-0">
            <a href="#" class="text-white opacity-3 fs-25 px-4 hover-white opacity-hover-10"><i
                    class="fab fa-linkedin-in"></i></a>
        </li>
    </ul>

</div>

Social Icon 02

<div class="py-4 bg-secondary pl-3">
    <ul class="list-inline mb-0">
        <li class="list-inline-item mr-2">
            <a href="#"
               class="w-40px h-40 rounded-circle bg-white text-body bg-hover-primary hover-white d-flex align-items-center justify-content-center"><i
                    class="fab fa-twitter"></i></a>
        </li>
        <li class="list-inline-item mr-2">
            <a href="#"
               class="w-40px h-40 rounded-circle bg-white text-body bg-hover-primary hover-white d-flex align-items-center justify-content-center"><i
                    class="fab fa-facebook-f"></i></a>
        </li>
        <li class="list-inline-item mr-2">
            <a href="#"
               class="w-40px h-40 rounded-circle bg-white text-body bg-hover-primary hover-white d-flex align-items-center justify-content-center">
                <i class="fab fa-instagram"></i></a>
        </li>
        <li class="list-inline-item mr-2">
            <a href="#"
               class="w-40px h-40 rounded-circle bg-white text-body bg-hover-primary hover-white d-flex align-items-center justify-content-center"><i
                    class="fab fa-linkedin-in"></i></a>
        </li>
    </ul>

</div>