104

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?

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
user592419
  • 5,103
  • 9
  • 42
  • 67
  • Use `tax-shadow`. Reference: https://code2real.blogspot.com/2021/03/how-to-make-text-unreadable-using-css.html – Pupil Mar 02 '22 at 10:02

6 Answers6

247

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

KittMedia
  • 7,368
  • 13
  • 34
  • 38
  • matches Font Awesome's naming conventions; nice! – SoEzPz Jan 25 '17 at 20:12
  • 3
    Don't forget to also change display property of icon from "inline" to "inline-block". The transform will not work on inline elements. [More in this discussion](https://stackoverflow.com/questions/14883250/css-transform-doesnt-work-on-inline-elements) – Oksana Romaniv Mar 18 '19 at 10:35
  • We can do it use `fa-flip-horizontal` class. Reference: https://code2real.blogspot.com/2019/03/how-to-flip-font-awesome-icons.html – Pupil Mar 02 '22 at 10:01
16

New Font-Awesome v5 has Power Transforms

You can rotate any icon by adding attribute data-fa-transform to icon

<i class="fas fa-magic" data-fa-transform="rotate-45"></i>

Here is a fiddle

For more information, check this out : Font-Awesome5 Power Tranforms

KittMedia
  • 7,368
  • 13
  • 34
  • 38
Noopur Dabhi
  • 1,867
  • 25
  • 38
15

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);
}
PseudoNinja
  • 2,846
  • 1
  • 27
  • 37
9

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 */
}
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
5

This worked for me

<i class="fa fa-power-off text-gray" style="transform: rotate(90deg);"></i>
James Ikubi
  • 2,552
  • 25
  • 18
3

If you use Less you can directly use the following mixin:

.@{fa-css-prefix}-rotate-90  { .fa-icon-rotate(90deg, 1);  }
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
StackHola
  • 914
  • 9
  • 19