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.
<divclass="fa-3x"><!-- A icon that's rotated 90 degress and flipped horizontally --><spanclass="fa-rotate-90"style="display: inline-block;"><iclass="fas fa-snowboarding fa-flip-horizontal"></i></span><!-- A icon that's flipped horizontally and rotated 90 degrees --><spanclass="fa-flip-horizontal"style="display: inline-block;"><iclass="fas fa-snowboarding fa-rotate-90"></i></span><!-- A icon that's flipped vertically and rotated 270 degress --><spanclass="fa-flip-vertical"style="display: inline-block;"><iclass="fas fa-snowboarding fa-rotate-270"></i></span><!-- A icon that's rotated 270 degress and flipped vertically --><spanclass="fa-rotate-270"style="display: inline-block;"><iclass="fas fa-snowboarding fa-flip-vertical"></i></span><!-- A icon that's flipped on both axes and arbitrarily rotated 120 degress --><spanclass="fa-flip-both"style="display: inline-block;"><iclass="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 --><spanclass="fa-rotate-by"style="display: inline-block;--fa-rotate-angle: 20deg;"><iclass="fas fa-snowboarding fa-flip-both"></i></span></div>
CSS Transforms don't work with inline elements!
If you're using an HTML element that is native by default set to display: inline;, you'll need to add a custom rule to change that. In the examples above, we use and generally recommend display: inline-block.
Need more control when rotating?
Our SVG + JS method includes a power transforms feature that allows for rotating an icon on a more granular scale, even by a single degree! If you're using Font Awesome that way, check it out.