Rotate Icons

Sometimes you need to rotate, flip, or mirror an icon for it to work in your project or design. We’ve included some quick utilities to help with that.

To arbitrarily rotate and flip icons, use the fa-rotate-* and fa-flip-* classes when you reference an icon.

  <div class="fa-3x">
    <i class="fas fa-snowboarding"></i>
    <i class="fas fa-snowboarding fa-rotate-90"></i>
    <i class="fas fa-snowboarding fa-rotate-180"></i>
    <i class="fas fa-snowboarding fa-rotate-270"></i>
    <i class="fas fa-snowboarding fa-flip-horizontal"></i>
    <i class="fas fa-snowboarding fa-flip-vertical"></i>
    <i class="fas fa-snowboarding fa-flip-both"></i>
  </div>

Rotate Classes

Class	Rotation Amount
`fa-rotate-90`	90°
`fa-rotate-180`	180°
`fa-rotate-270`	270°
`fa-flip-horizontal`	mirrors icon horizontally
`fa-flip-vertical`	mirrors icon vertically
`fa-flip-both`	mirrors icon vertically and horizontally (requires 5.7.0 or greater)

Combining Rotating + Flipping

Our rotation utilities leverage CSS’s transform property. You can both rotate and flip an icon, but you’ll need to use some extra markup, such as a <span> element, to do so as placing multiple rotate/flip classes on one element will just overwrite one another. Apply one rotate utility class on the parent element and another on the nested icon.

  <div class="fa-3x">
    <!-- A icon that's rotated 90 degress and flipped horizontally -->
    <span class="fa-rotate-90" style="display: inline-block;">
      <i class="fas fa-snowboarding fa-flip-horizontal"></i>
    </span>

    <!-- A icon that's flipped horizontally and rotated 90 degrees  -->
    <span class="fa-flip-horizontal" style="display: inline-block;">
      <i class="fas fa-snowboarding fa-rotate-90"></i>
    </span>

    <!-- A icon that's flipped vertically and rotated 270 degress  -->
    <span class="fa-flip-vertical" style="display: inline-block;">
      <i class="fas fa-snowboarding fa-rotate-270"></i>
    </span>

    <!-- A icon that's rotated 270 degress and flipped vertically -->
    <span class="fa-rotate-270" style="display: inline-block;">
      <i class="fas fa-snowboarding fa-flip-vertical"></i>
    </span>

    <!-- A icon that's flipped on both axes and arbitrarily rotated 120 degress  -->
    <span class="fa-flip-both" style="display: inline-block;">
      <i class="fas fa-snowboarding fa-rotate-by" style="--fa-rotate-angle: 120deg;"></i>
    </span>

    <!-- A icon that's arbitrarily rotated 20 degres and flipped on both axes  -->
    <span class="fa-rotate-by" style="display: inline-block; --fa-rotate-angle: 20deg;">
      <i class="fas fa-snowboarding fa-flip-both"></i>
    </span>
  </div>