Sosyal Medya İkonları

• Aşağıda insagramda paylaşmış olduğum “Açılır Menü Çubuğu” gönderisin kodları bulunmaktadır.
• İnsagram gönderisine ulaşmak için buraya tıklayın.
• Ayrıca gönderilerin devamı için beğenmeyi unutmayın.
• Kodlarla ilgili sorunlar çıkması durumda www.mekyazilim.com/iletisim kısmından bize ulaşabilirsiniz.

Bu projede ikonlar için font awesome ikon kütüphanesi kullanılmıştır. Aşağıda vericeğim kodu html projenizin head kısmına yapıştırırsanız sorunsuz çalışıcaktır.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">

HTML KODLARI

    <li>
        <button class="btn btn-renk sMedya-btn">
            <i class="fab fa-fw fa-facebook-f"></i>
        </button>
    </li>
    <li>
        <button class="btn btn-renk sMedya-btn">
            <i class="fab fa-instagram"></i></i>
        </button>
    </li>

    <li>
        <button class="btn btn-renk sMedya-btn">
            <i class="fab fa-fw fa-twitter"></i>
        </button>
    </li>

    <li>
        <button class="btn btn-renk sMedya-btn">
            <i class="fab fa-fw fa-linkedin-in"></i>
        </button>
    </li>
    <li>
        <button class="btn btn-renk sMedya-btn">
            <i class="fab fa-fw fa-dribbble"></i>
        </button>
    </li>

CSS KODLARI

  li {
            list-style: none;
            display: inline-block;
        }


        .btn {
            font-weight: 400;
            border: 2px solid transparent;
            border-radius: .4rem;
            cursor: pointer;
            transition: all .8s;
        }

        .sMedya-btn {
            width: 5rem;
            height: 5rem;
            border-radius: 50%;
            font-size: 2rem;
            line-height: 2rem;
        }

        .btn-renk {
            color: #212529;
            border-color: #212529;
            background-color: transparent;
        }

        .btn-renk:hover {
            color: #fff;
            background-color: #212529;
        }