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-flip-* classes when you reference an icon.
|mirrors icon horizontally
|mirrors icon vertically
|mirrors icon vertically and horizontally (requires 5.7.0 or greater)
Combining Rotating + Flipping
Our rotation utilities leverage CSS's transform property(opens new window) . 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.