<h3>背景あり</h3>
<div class="fa-4x">
  <span class="fa-layers fa-fw bgc">
    <i class="fas fa-circle" style="color:Tomato"></i>
    <i class="fa-inverse fas fa-times" data-fa-transform="shrink-6"></i>
  </span>

  <span class="fa-layers fa-fw bgc">
    <i class="fas fa-bookmark"></i>
    <i class="fas fa-heart" data-fa-transform="shrink-10 up-2" style="color:Tomato"></i>
  </span>

  <span class="fa-layers fa-fw bgc">
    <i class="fas fa-play" data-fa-transform="rotate--90 grow-2"></i>
    <i class="fas fa-sun fa-inverse" data-fa-transform="shrink-10 up-2"></i>
    <i class="fas fa-moon fa-inverse" data-fa-transform="shrink-11 down-4.2 left-4"></i>
    <i class="fas fa-star fa-inverse" data-fa-transform="shrink-11 down-4.2 right-4"></i>
  </span>
</div>

<h3>fa-fwクラスなし</h3>
<div class="fa-4x">
  <span class="fa-layers">
    <i class="fas fa-bookmark"></i>
    <i class="fas fa-heart" data-fa-transform="shrink-10 up-2" style="color:Tomato"></i>
  </span>
</div>

h3 {
  border-bottom: 1px solid #000;
}
.bgc {
  background-color: MistyRose;
}