[css] Statically rotate font-awesome icons

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?

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);
}

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

This works perfectly

<i class="fa fa-power-off text-gray" style="transform: rotate(90deg);"></i>

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 */
}

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

.@{fa-css-prefix}-rotate-90  { .fa-icon-rotate(90deg, 1);  }