Power Transforms
Thanks to the power of SVG+JS, you can position icons randomly using the
data-fa-transform
element attribute.
We’ll cover the basics of flipping icons, scaling them up or down, and moving them left or right, for some super-useful effects.
Scaling
Power Transform scaling affects icon size without changing or moving the container. To scale icons up or down, use grow-#
and shrink-#
with any arbitrary value, including decimals. Units are 1/16em. For clarity in the example, we’ve added a background color on the icon so you can see the effect.
<div class="fa-4x"> <i class="fa-solid fa-seedling" data-fa-transform="shrink-8" style="background:MistyRose"></i> <i class="fa-solid fa-seedling" style="background:MistyRose"></i> <i class="fa-solid fa-seedling" data-fa-transform="grow-6" style="background:MistyRose"></i></div>
Positioning
Power Transform positioning affects the icon location without changing or moving the container. To move icons up, down, left, or right, use up-#
, down-#
, left-#
, and right-#
with any arbitrary value, including decimals. Units are 1/16em. For clarity in the example, we’ve added a background color on the icon so you can see the effect.
<div class="fa-4x"> <i class="fa-solid fa-seedling" data-fa-transform="shrink-8" style="background:MistyRose" ></i> <i class="fa-solid fa-seedling" data-fa-transform="shrink-8 up-6" style="background:MistyRose" ></i> <i class="fa-solid fa-seedling" data-fa-transform="shrink-8 right-6" style="background:MistyRose" ></i> <i class="fa-solid fa-seedling" data-fa-transform="shrink-8 down-6" style="background:MistyRose" ></i> <i class="fa-solid fa-seedling" data-fa-transform="shrink-8 left-6" style="background:MistyRose" ></i></div>
Rotating and Flipping
Power Transform rotating & flipping affects the icon angle and reflection without changing or moving the container. To rotate or flip icons use any combination of rotate-#
, flip-v
, and flip-h
with any arbitrary value. Units are degrees with negative numbers allowed (see fifth icon in the example). For clarity in the example, we’ve added a background color on the icon so you can see the effect.
<div class="fa-4x"> <i class="fa-solid fa-seedling" data-fa-transform="rotate-90" style="background:MistyRose" ></i> <i class="fa-solid fa-seedling" data-fa-transform="rotate-180" style="background:MistyRose" ></i> <i class="fa-solid fa-seedling" data-fa-transform="rotate-270" style="background:MistyRose" ></i> <i class="fa-solid fa-seedling" data-fa-transform="rotate-30" style="background:MistyRose" ></i> <i class="fa-solid fa-seedling" data-fa-transform="rotate--30" style="background:MistyRose" ></i> <i class="fa-solid fa-seedling" data-fa-transform="flip-v" style="background:MistyRose" ></i> <i class="fa-solid fa-seedling" data-fa-transform="flip-h" style="background:MistyRose" ></i> <i class="fa-solid fa-seedling" data-fa-transform="flip-v flip-h" style="background:MistyRose" ></i></div>
Power Transform data-fa-transform Attributes
HTML data- Attribute | Details |
---|---|
data-fa-transform="shrink-[value]" | Shrinks an icon |
data-fa-transform="grow-[value]" | Grows an icon |
data-fa-transform="up-[value]" | Moves an icon up |
data-fa-transform="right-[value]" | Moves an icon right |
data-fa-transform="down-[value]" | Moves an icon down |
data-fa-transform="left-[value]" | Moves an icon left |
data-fa-transform="rotate-[angle]" | rotates an icon by a specific degree (with negative numbers allowed) |
data-fa-transform="flip-h" | mirrors an icon horizontally |
data-fa-transform="flip-v" | mirrors icon vertically |