<h3>data-fa-transform属性を使用した例</h3>
<div class="fa-4x">
  <i class="fas fa-magic bgc" data-fa-transform="shrink-8"></i>
  <i class="fas fa-magic bgc"></i>
  <i class="fas fa-magic bgc" data-fa-transform="grow-16"></i>
</div>

<h3>fa-2xなどのクラスの場合のアイコンの大きさの変化</h3>
<div class="fa-4x">
  <i class="fas fa-magic fa-xs bgc"></i>
  <i class="fas fa-magic bgc"></i>
  <i class="fas fa-magic fa-2x bgc"></i>
</div>

<h3>shrinkの数字を大きくしていった例</h3>
<div class="fa-4x">
  <i class="fas fa-magic bgc"></i>
  <i class="fas fa-magic bgc" data-fa-transform="shrink-1"></i>
  <i class="fas fa-magic bgc" data-fa-transform="shrink-8"></i>
  <i class="fas fa-magic bgc" data-fa-transform="shrink-16"></i>
  <i class="fas fa-magic bgc" data-fa-transform="shrink-24"></i>
  <i class="fas fa-magic bgc" data-fa-transform="shrink-32"></i>
  <i class="fas fa-magic bgc" data-fa-transform="shrink-48"></i>
</div>

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