Statically rotate font-awesome icons
css, font-awesome, rotation
Solution
Before FontAwesome 5:
The standard declarations just contain `.fa-rotate-90`, `.fa-rotate-180` and `.fa-rotate-270`. However you can easily create your own:
.fa-rotate-45 {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
With FontAwesome 5:
You can use what’s so called “Power Transforms”. Example:
<i class="fas fa-snowman" data-fa-transform="rotate-90"></i>
<i class="fas fa-snowman" data-fa-transform="rotate-180"></i>
<i class="fas fa-snowman" data-fa-transform="rotate-270"></i>
<i class="fas fa-snowman" data-fa-transform="rotate-30"></i>
<i class="fas fa-snowman" data-fa-transform="rotate--30"></i>
You need to add the `data-fa-transform` attribute with the value of `rotate-` and your desired rotation in degrees.
Source: https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms
Problem
I'd like to statically rotate my font-awesome icons by 45 degrees. It says on the site that: To arbitrarily rotate and flip icons, use the fa-rotate-* and fa-flip-* classes. However, doing ``` <i class="fa fa-link fa-rotate-45" style="font-size:1.5em"></i> ``` does not work, whereas replacing `fa-rotate-45` with `fa-rotate-90` does. Does this mean that they in fact cannot rotate arbitrarily?