Navigation icônes réseaux sociaux

 

Html

<nav class="navbar main-nav-icons">
    <div class="navbar-brand logo-nav">
        <a class="navbar-item" href="">
            <img src="https://bulma.io/images/bulma-logo.png" alt="">
        </a>
    </div>
    <div class="navbar-start navbar-contact">
        <a class="navbar-item" href="">
            <span class="icon mr-1">
                <i class="fas fa-map-marker-alt fa-lg"></i>
            </span> Adresse </a>
        <a class="navbar-item" href="">
            <span class="icon mr-1">
                <i class="fas fa-phone-square fa-lg"></i>
            </span> 0101010101 </a>
        <div class="navbar-start navbar-icons">
        <a class="navbar-item" target="_blank" href="">
            <span class="icon-social">
                <i class="fab fa-youtube fa-lg"></i>
            </span>
        </a>
        <a class="navbar-item" target="_blank" href="">
            <span class="icon-social">
                <i class="fab fa-instagram fa-lg"></i>
            </span>
        </a>
        <a class="navbar-item" target="_blank" href="">
            <span class="icon-social">
                <i class="fab fa-facebook fa-lg"></i>
            </span>
        </a>
        <a class="navbar-item" target="_blank" href="">
            <span class="icon-social">
                <i class="fab fa-twitter fa-lg"></i>
            </span>
        </a>
        </div>
    </div>
    <div class="navbar-end">
        <div class="navbar-item">
            <div class="field is-grouped acc-cart">
                <p class="control">
                    <a class="bd-tw-button button" href="">
                        <span class="icon">
                            <i class="fas fa-user fa-lg"></i>
                        </span>
                        <span> Compte </span>
                    </a>
                </p>
                <p class="control">
                    <a class="bd-tw-button button" href="">
                        <span class="icon">
                            <i class="fas fa-shopping-bag fa-lg"></i>
                        </span>
                        <span>Panier</span>
                    </a>
                </p>
            </div>
        </div>
    </div>
</nav>

Css

.fa-facebook {
    color: #3b5999;
}

.fa-instagram {
    color: #e4405f;
}

.fa-youtube {
    color: #cd201f;
}

.fa-twitter {
    color: #55acee;
}

.fa-facebook:hover {
    opacity: 0.8;
}

.fa-instagram:hover {
    opacity: 0.8;
}

.fa-youtube:hover {
    opacity: 0.8;
}

.fa-twitter:hover {
    opacity: 0.8;
}

@media screen and (max-width: 768px) {
    .navbar-icons {
        display: inline-flex;
    }
    .main-nav-icons {
        text-align: center;
    }
    .logo-nav {
        justify-content: center;
    }
    .acc-cart {
        justify-content: center !important;
    }
}