Statically rotate font-awesome icons

Question

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   lt i class  fa fa-link fa-rotate-45  style  font-size 1 5em  gt  lt  i gt    does not work  whereas replacing fa-rotate-45 with fa-rotate-90 does  Does this mean that they in fact cannot rotate arbitrarily

User · Answer

New Font-Awesome v5 has Power Transforms  You can rotate any icon by adding attribute data-fa-transform to icon   lt i class  fas fa-magic  data-fa-transform  rotate-45  gt  lt  i gt    Here is a fiddle  For more information  check this out   Font-Awesome5 Power Tranforms

User · Answer

This works perfectly  lt i class  quot fa fa-power-off text-gray quot  style  quot transform  rotate 90deg   quot  gt  lt  i gt

User · Answer

If you want to rotate 45 degrees  you can use the CSS transform property    fa-rotate-45       -ms-transform rotate 45deg          Internet Explorer 9        -webkit-transform rotate 45deg      Chrome  Safari  Opera        transform rotate 45deg              Standard syntax

User · Answer

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    lt i class  fas fa-snowman  data-fa-transform  rotate-90  gt  lt  i gt   lt i class  fas fa-snowman  data-fa-transform  rotate-180  gt  lt  i gt   lt i class  fas fa-snowman  data-fa-transform  rotate-270  gt  lt  i gt   lt i class  fas fa-snowman  data-fa-transform  rotate-30  gt  lt  i gt   lt i class  fas fa-snowman  data-fa-transform  rotate--30  gt  lt  i gt    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

User · Answer

If you use Less you can directly use the following mixin      fa-css-prefix -rotate-90     fa-icon-rotate 90deg  1

User · Answer

In case someone else stumbles upon this question and wants it here is the SASS mixin I use    mixin rotate  deg  90        sDeg     deg deg       -webkit-transform  rotate  sDeg       -moz-transform  rotate  sDeg       -ms-transform  rotate  sDeg       -o-transform  rotate  sDeg       transform  rotate  sDeg

[css] Statically rotate font-awesome icons

Examples related to css

Examples related to rotation

Examples related to font-awesome