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

Question

我有一个 div 和一个 li，每个 li 都有一个方形图标（这是以前很棒的图标的糟糕表现）。现在我尝试插入正确的 fontawesome 图标（例如 ）。我想用正确的 fontawesome 图标替换现在的方形图标（我刚才提到的带有  代码的 fontawesome 图标库对我有用，问题是我无法用正确的 html 版本的 fontawesome ()。你可以在这里看到我的问题 here.

的实例

当我 mousehover 时，方形图标在顶部有一个 3d 立方体效果翻转，但是如果我插入像下面提供的 HTML 这样的 fontawesome 图标，它就会像那样显示并且没有 3d 立方体mousehover翻转效果csstransform:

.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

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

Can't insert the fontawesome icon where the white square is

html

css

font-awesome

font-awesome-5