Не могу вставить внушительный значок, где белый квадрат

Question

У меня есть div с li, у каждого li есть квадратная иконка (раньше это была плохая работа с потрясающей иконкой).Теперь я попытался вставить правильный значок (например, <i class="fab fa-facebook-f"></i>).Я хочу заменить квадратный значок, который теперь есть, на правильный значок fontawesome (библиотека fontawesome с кодом <i>, который я только что упомянул, работает для меня, проблема в том, что я не могу заменить квадратный значок на правильныйhtml версия fontawesome (<i class="fab fa-facebook-f"></i>). Вы можете увидеть живой пример моей проблемы здесь здесь .

Квадратный значок дает эффект 3d-куба, который переворачивается вверху, когда я mousehover, но если я вставлю потрясающие значки, как в приведенном ниже HTML-коде, это будет выглядеть так, и не будет никакого 3d-куба mousehover эффект переворачивания css transform:

.social-head-container {
  position: absolute;
  z-index: 10000000000000000;
  float: right;
  width: 138px;
  font-size: 0px;
  background: #c23f69;
  padding-left: 2px !important;
  right: 48px;
  padding-right: 0px;
  top: 75px;
  margin: 0px !important;
}

.container-social ul {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  -webkit-font-smoothing: subpixel-antialiased;
  backface-visibility: hidden;
  transform: perspective(1px);
  margin: 0;
  height: 51px;
  background: #c23f69;
  width: 197px;
  padding: 0;
  display: flex;
}

.container-social ul li {
  position: relative;
  list-style: none;
  height: 51px;
  width: 51px;
}

.container-social ul li a {
  display: block;
  transition: 0.5s;
  background: #333;
}

.container-social li a span {
  width: 100%;
  height: 100%;
}

.container-social ul li a span:before {
  font-family: fontAwesome;
  line-height: 50px;
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 100%;
  background: #c23f69;
  color: #fff;
  transform-origin: top;
  transition: transform 0.5s;
  text-align: center;
}

.container-social ul li:hover a span:before {
  transform: rotateX(90deg) translateY(-50%);
  -webkit-backface-visibility: hidden;
}

.container-social ul li a span:after {
  font-family: fontAwesome;
  line-height: 50px;
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 100%;
  background: #333;
  color: #fff;
  transform-origin: bottom;
  transition: transform 0.5s;
  text-align: center;
  transform: rotateX(90deg) translateY(50%);
  -webkit-backface-visibility: hidden;
}

.container-social ul li.facebook a span:after {
  background: #3c579e;
}

.container-social ul li.twitter a span:after {
  background: #1da1f3;
}

.container-social ul li.instagram a span:after {
  background: #f09433;
  background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  background: -webkit-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888', GradientType=1);
}

.container-social ul li:nth-child(4) a span:after {
  background: #0077B5;
}

.container-social ul li:nth-child(5) a span:after {
  background: #3cba54;
}

.container-social ul li:hover a span:after {
  transform: rotateX(0deg) translateY(0%);
  -webkit-backface-visibility: hidden;
}

.container-social ul li.facebook a span:before,
.container-social ul li.facebook a span:after {
  content: '\f09a';
}

.container-social ul li.instagram a span:before,
.container-social ul li.instagram a span:after {
  content: '\f16d';
}

.container-social ul li.twitter a span:before,
.container-social ul li.twitter a span:after {
  content: '\f099';
}

<div class="float-right social-head-container">
  <div class="container-social">
    <ul>
      <div class="social-head">
        <li class="facebook"><i class="fab fa-facebook-f"></i><a href="#"><span></span></a></li>
      </div>
      <div class="social-head">
        <li class="twitter"><i class="fab fa-twitter"></i><a href="#"><span></span></a></li>
      </div>
      <div class="social-head">
        <li class="instagram"><i class="fab fa-instagram"></i><a href="#"><span></span></a></li>
      </div>
    </ul>
  </div>
</div>

Answer 1

Вы ссылались на неправильное семейство шрифтов.

С:

.container-social ul li a span:before, .container-social ul li a span:after { font-family: "Font Awesome 5 Brands"; }

все работает нормально.

Answer 2

Ваш HTML верен, но независимо от того, что вы используете Unicode в CSS, это неправильно, поэтому он не работает должным образом.

<i class="fab fa-facebook-f"> unicode is f39e

<i class="fab fa-twitter"> unicode is f099

<i class="fab fa-instagram"> unicode is f16d