Исправлен div с иконкой Font Awesome, расположенной в абсолютном положении - PullRequest
Новая
       6

Исправлен div с иконкой Font Awesome, расположенной в абсолютном положении

0 голосов
/ 26 октября 2018

У меня проблема с логотипом Facebook на фиксированном элементе div и иконкой с абсолютным позиционированием
Есть идеи почему? Все остальные значки работают как шарм.

Вот кусок кода. И это результат

bug

.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>

1 Ответ

0 голосов
/ 26 октября 2018 

.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>
...