<h3>移動例</h3>
<div class="fa-4x">
  <i class="fas fa-magic bgc" data-fa-transform="shrink-8"></i>
  <i class="fas fa-magic bgc" data-fa-transform="shrink-8 up-6"></i>
  <i class="fas fa-magic bgc" data-fa-transform="shrink-8 right-6"></i>
  <i class="fas fa-magic bgc" data-fa-transform="shrink-8 down-6"></i>
  <i class="fas fa-magic bgc" data-fa-transform="shrink-8 left-6"></i>
</div>

<h3>通常サイズで16指定</h3>
<div class="fa-4x">
  <i class="fas fa-magic bgc"></i>
  <i class="fas fa-magic bgc" data-fa-transform="down-16"></i>
  <i class="fas fa-magic bgc" data-fa-transform="right-16"></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