We Are Hiring! Font Awesome is hiring a product designer to help us take Shoelace to the next level.
Read about the Job

You're viewing docs for v5.15.4, an older version of Font Awesome.

Thanks to the power of SVG in Font Awesome 5, now you can scale, position, flip, & rotate icons arbitrarily using the data-fa-transform element attribute. You can even combine them for some super-useful effects.

Before You Get Started

Make sure you're:

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="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>

Positioning

Power Transform positioning affects 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="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>

Rotating & Flipping

Power Transform rotating & flipping affects 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="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>

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

Did you know?

You can mix and match any of the power transforms noted above together on a single icon.