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

Question

I have a div with a li, each li has a square icon (that was a bad perform of awesome icon before). Now I tried to insert the correct fontawesome icon (<i class="fab fa-facebook-f"></i>, for example). I want to replace the square icon that has now, with the correct fontawesome icon (the fontawesome icon library with <i> code that I just mentioned work's for me, the problem is I can't get to replace the square icon with the correct html version of fontawesome (<i class="fab fa-facebook-f"></i>). You can see a live example here of my problem here.

The square icon's get a 3d cube effect flip on top when I mousehover it, but if I insert the fontawesome icons like the HTML provided below, it's shows like that and no 3d cube mousehover flip effect 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

You were referencing to the wrong font family.

With:

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

it's working fine.