修复了具有绝对位置的Font Awesome图标的div

Question

我在固定div和绝对定位的图标上出现Facebook徽标问题
有什么想法吗？所有其他图标的工作方式就像是一种魅力。

这是一段代码。 结果就是

.widgets-container {
  position: fixed;
  top: 120px;
  right: 0;
  z-index: 9999
}

.widget-item .widget-icon {
  background-color: #e21836;
  background-position: 50% 0
}

.widget-icon.sharefb:before {
  content: "\f082";
  font-family: "Font Awesome\ 5 Pro";
  position: absolute;
  left: calc(50% - .5em);
  top: calc(50% - .3em);
  font-weight: 100;
  font-size: 2rem;
  color: #fff
}

.widget-icon {
  cursor: pointer;
  width: 48px;
  height: 48px;
  background-color: #e21836;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50%;
  position: relative;
  z-index: 100;
  border: 1px solid transparent
}

<link href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" rel="stylesheet"/>
<div class="widgets-container">
  <div id="sharefb-widget" class="widget-item">
    <div class="widget-icon sharefb"></div>
  </div>
</div>

Answer 1

.widgets-container {
  position: fixed;
  top: 120px;
  right: 0;
  z-index: 9999
}

.widget-item .widget-icon {
  background-color: #e21836;
  background-position: 50% 0
}

.widget-icon.sharefb:before {
  content: "\f082";
  /* font-family: "Font Awesome\ 5 Pro"; change this */
  /* to this */ font-family: "Font Awesome 5 Brands";
  position: absolute;
  left: calc(50% - .5em);
  top: calc(50% - .3em);
  font-weight: 100;
  font-size: 2rem;
  color: #fff
}

.widget-icon {
  cursor: pointer;
  width: 48px;
  height: 48px;
  background-color: #e21836;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50%;
  position: relative;
  z-index: 100;
  border: 1px solid transparent
}

<link href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" rel="stylesheet"/>
<div class="widgets-container">
  <div id="sharefb-widget" class="widget-item">
    <div class="widget-icon sharefb"></div>
  </div>
</div>