超级变形

由于 Font Awesome 5 中 SVG 的强大功能，现在您可以使用 data-fa-transform 元素属性任意缩放、定位、翻转和旋转图标。 您甚至可以将它们组合起来以获得一些超级有用的效果。

#缩放

Power Transform 缩放会影响图标大小，而无需更改或移动容器。 要放大或缩小图标，请使用带有任意值（包括小数）的 grow-# 和 shrink-#。 单位是 1/16em。 为了示例的清楚，我们在图标上添加了背景色，以便您可以看到效果。

<div class="fa-4x">
  <i class="fas fa-seedling" data-fa-transform="shrink-8" style="background:MistyRose"></i>
  <i class="fas fa-seedling" style="background:MistyRose"></i>
  <i class="fas fa-seedling" data-fa-transform="grow-6" style="background:MistyRose"></i>
</div>

#定位

“超级转换“定位会影响图标位置，而无需更改或移动容器。 要向上、向下、向左或向右移动图标，请使用 up-#、down-#、left-# 和 right-# 以及任意值，包括小数。 单位是 1/16em。 为了示例的清楚，我们在图标上添加了背景色，以便您可以看到效果。

<div class="fa-4x">
  <i class="fas fa-seedling" data-fa-transform="shrink-8" style="background:MistyRose"></i>
  <i class="fas fa-seedling" data-fa-transform="shrink-8 up-6" style="background:MistyRose"></i>
  <i class="fas fa-seedling" data-fa-transform="shrink-8 right-6" style="background:MistyRose"></i>
  <i class="fas fa-seedling" data-fa-transform="shrink-8 down-6" style="background:MistyRose"></i>
  <i class="fas fa-seedling" data-fa-transform="shrink-8 left-6" style="background:MistyRose"></i>
</div>

#旋转和翻转

“超级转换“旋转和翻转会影响图标角度和反射，而无需更改或移动容器。 要旋转或翻转图标，请使用任意值的 rotate-#、flip-v 和 flip-h 的任意组合。 单位是度数，允许使用负数（参见示例中的第五个图标）。 为了示例的清楚，我们在图标上添加了背景色，以便您可以看到效果。

<div class="fa-4x">
  <i class="fas fa-seedling" data-fa-transform="rotate-90" style="background:MistyRose"></i>
  <i class="fas fa-seedling" data-fa-transform="rotate-180" style="background:MistyRose"></i>
  <i class="fas fa-seedling" data-fa-transform="rotate-270" style="background:MistyRose"></i>
  <i class="fas fa-seedling" data-fa-transform="rotate-30" style="background:MistyRose"></i>
  <i class="fas fa-seedling" data-fa-transform="rotate--30" style="background:MistyRose"></i>
  <i class="fas fa-seedling" data-fa-transform="flip-v" style="background:MistyRose"></i>
  <i class="fas fa-seedling" data-fa-transform="flip-h" style="background:MistyRose"></i>
  <i class="fas fa-seedling" data-fa-transform="flip-v flip-h" style="background:MistyRose"></i>
</div>

#data-fa-transform 属性