<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://use.fontawesome.com/releases/v5.0.6/js/all.js