无法在白色正方形所在的位置插入fontawesome图标

Question

我有一个带li的div，每个li都有一个正方形图标（以前是真棒图标的不好表现）。现在，我尝试插入正确的字体图标（例如<i class="fab fa-facebook-f"></i>）。我想用正确的fontawesome图标（现在带有<i>代码的fontawesome图标库替换现在具有的正方形图标），问题是我无法用替换正方形图标正确的html版本的fontawesome（<i class="fab fa-facebook-f"></i>）。您可以在此处看到我的问题here的实时示例。

当我mousehover时，正方形图标的顶部会出现3d立方体效果翻转，但是如果我插入下面提供的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是正确的，但是无论您在css中使用Unicode是什么错误，这都是它无法正常工作的原因。

<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