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.
Rotate Classes
Class
Details
fa-rotate-90
Rotates an icon 90°
fa-rotate-180
Rotates an icon 180°
fa-rotate-270
Rotates an icon 270°
fa-flip-horizontal
Mirrors an icon horizontally
fa-flip-vertical
Mirrors an icon vertically
fa-flip-both
Mirrors an icon both vertically and horizontally
fa-rotate-by
Rotates an icon by a specific degree - setting an accompanying valid inline value for --fa-rotate-angle is required
Custom Rotation
We’ve added a CSS custom property to make rotating icons more customizable and specific. Add the .fa-rotate-by class to an icon and define your own angle.
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.