Bootstrap Цвет фона социальных кнопок и проблема зависания

Question

Я использую Bootstrap для создания социальных кнопок для Facebook и LinkedIn. Когда я устанавливаю белый цвет фона для кнопок, он не покрывает кнопку должным образом. Белый фон начинает покрывать за пределами социальных кнопок. Это выглядит так:

Я установил его на белый, потому что, если я не сделаю этого, буквы станут того же цвета, что и серый фон.

Это это код, который я настроил в CSS:

.social a {
  font-size: 4.5em;
  padding: 1rem;
}

.fa-facebook {
  background-color: white;
  color: #3b5998;
}

.fa-linkedin {
  background-color: white;
  color: #0e76a8;
}

.fa-facebook:hover, .fa-linkedin:hover {
  color: #d5d5d5;
}

И это код, который я установил в HTML:

<div class="container-fluid padding">
    <div style="padding: 0px; margin: 0px;" class="row text-center padding">
        <div style="padding: 0px; margin: 0px;"  class="col-12 social">
            <a href="https://www.facebook.com/westernUBT/"><i class="fab fa-facebook"></i></a>
            <a href="https://www.linkedin.com/company/western-hasp/"><i class="fab fa-linkedin"></i></a>
        </div>
    </div>
</div>

Также, когда я наводю курсор на кнопки Похоже, что он обнаруживает щелчок за пределами области значков социальных сетей. Например, если я наведусь на серую область рядом со значками социальных сетей, она, кажется, обнаружит это, и я не знаю почему.

Answer 1

вы можете использовать font-awesome stack

#social-media-container {
   display:flex;
   
    background-color: black;
}
li{list-style:none;}
.social-media a .fa-stack{font-size:4.5em;
 }




.social-media a .outside {
  font-size: 2em;
  color:#1B3764;
}

.social-media a .inside {
  font-size: 1em;
  color: white;
}


.social-media a:hover .outside {
  color: #d5d5d5;
}

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<div id="social-media-container">
  <li class="social-media">
    <a href="https://www.facebook.com/westernUBT/" target="blank">
      <span class="fa-stack icon-facebook">
        <i class="fa fa-square fa-stack-1x outside"></i>
        <i class="fa fa-facebook fa-stack-1x inside"></i>
      </span>
    </a>
  </li>
  
  <li class="social-media">
    <a href="https://www.linkedin.com/company/western-hasp/" target="blank">
      <span class="fa-stack icon-linkedin">
        <i class="fa fa-square fa-stack-1x outside"></i>
        <i class="fa fa-linkedin fa-stack-1x inside"></i>
      </span>
    </a>
   </li>
</div>

Answer 2

Вы можете решить это с помощью псевдоэлемента :after.
Сначала удалите белый фон с иконок. Затем добавьте position: relative к значкам, потому что псевдоэлемент будет абсолютно позиционирован.

Значок должен находиться перед этим новым псевдоэлементом. То есть :before будет иметь более высокое значение z-index.

Таким образом, вы помещаете его в центр ровно настолько, чтобы вызвать нужный вам белый эффект.
Он может не работать со всеми различными значками.

CSS:

body {
  background-color: #333
}
.social a {
  font-size: 4.5em;
  padding: 1rem;
}

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

.fa-linkedin {
  color: #0e76a8;
}

.fa-facebook:hover, .fa-linkedin:hover {
  color: #d5d5d5;
}

.social i {
  position: relative;
}

.social i:before {
  position: relative;
  z-index: 1;
}

.social i:after {
  content: '';
  background-color: #fff;
  position: absolute;
  height: 88%;
  width: 88%;
  left: 6%;
  top: 6%;
}

Для проблемы области щелчка вы можете заменить отступы на полях и использовать размер шрифта для самой иконки (<i>) вместо <a> .