Listenin İçindeki <a href="#"> Bağlantısın Liste Alanını Kaplamasını Nasıl Sağlarım?

Şurada: https://prnt.sc/uppw7v sosyal paylaşım butonları yaptım, liste olarak yapmak ile hata mı ettim emin değilim. Olması gereken nedir? İçerideki <a>'nın alan olarak <li>yi kapsamasını istiyorum. Şöyle: https://prnt.sc/uppwtp

.msmb ul li a{
width: arkaplan-kadar;
height: arkaplan-kadar;
}

ul#menu-home-2 >li {
display: inline-table;
}

ul#menu-home-2 >li > a{
display: table-cell;
}

Sabit bir değer veremem, butonlar responsive. Ayrıca hiç bir etki de olmuyor bu şekilde, nedenini bilmiyorum.

Ekledim, Facebook ve Whatsapp olurken Twitter ve Pinterest olmadı. Aynı kodlar ekli görünüyor, biri olurken biri neden olmuyor çok ilginç. Şu an ekli durumda.

Pardon ben ana menüye baktim PC ye gecince kontrol ederim

Onu fark ettim de sonuç olarak verdiğiniz kodlar bahsettiğim yere de uygulanabilirdi, bende öyle yaptım ve kısmen sorun çözüldü. Kalan kısmı için cevabınızı bekliyorum hocam.

Hocam bazı liste elemanlarında before kullanılmış diğerlerinde kullanılmamış bu yüzden olmuyor. Olmayan ögelerde de diğerleri gibi

<i class="dm-icon-twitter"></i>

benzeri ikon kullanırsanız a tagı içerisinde sorun ortadan kalkacaktır. Mesela

<i class="dm-icon-facebook"></i> gibi. Before lar kalkacak yerine i ile ikon ekleme gelecek.

Galiba sorun bir kaç harfin fazladan olması o kısımdaki kodları inceleyiniz ve i tagı içindeki class isimlerini kontrol eidniz. Facebook için

<i class="dm-icon-facebook-f"></i>

şeklinde kalmış, bir -f fazla galiba

Aynen hocam, gözümden kaçmış o detay. Diğer sitedeki icon paketinde -f olunca çerçevesiz Facebook'un f'si ve olmayınca çerçeveli icon çağırılıyordu. Bu sitede tek icon var o da -f ve -p ekleri olmadan gelenler. İyi yakalamışsınız valla, teşekkür ederim.