We've added a CSS custom property(opens new window) 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(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="fa-solid 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="fa-solid 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="fa-solid 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="fa-solid 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="fa-solid 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="fa-solid 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.