Gire ícones incríveis de fontes estaticamente

Eu gostaria de girar estaticamente meus ícones incríveis de fontes em 45 graus. Diz no site que:

Para girar e virar ícones arbitrariamente, use as classes fa-rotate- * e fa-flip- *.

No entanto, fazendo

<i class="fa fa-link fa-rotate-45" style="font-size:1.5em"></i>

não funciona, enquanto substituir fa-rotate-45por fa-rotate-90. Isso significa que eles de fato não podem girar arbitrariamente?

Antes de FontAwesome 5:

As declarações padrão contêm apenas .fa-rotate-90, .fa-rotate-180e .fa-rotate-270. No entanto, você pode criar facilmente o seu próprio:

.fa-rotate-45 {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

Com FontAwesome 5:

Você pode usar o que é chamado de “transformações de energia”. Exemplo:

<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>

Você precisa adicionar o data-fa-transformatributo com o valor de rotate-e a rotação desejada em graus.

Fonte: https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms

No caso de outra pessoa se deparar com essa questão e quiser, aqui é o mixin SASS que eu uso.

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

Novo Font-Awesome v5 tem Power Transforms

Você pode girar qualquer ícone adicionando um atributo data-fa-transformao ícone

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

Aqui está um violino

Para obter mais informações, consulte: Font-Awesome5 Power Tranforms

Se quiser girar 45 graus, você pode usar a propriedade de transformação CSS:

.fa-rotate-45 {
    -ms-transform:rotate(45deg);     /* Internet Explorer 9 */
    -webkit-transform:rotate(45deg); /* Chrome, Safari, Opera */
    transform:rotate(45deg);         /* Standard syntax */
}

Se você usar Less, poderá usar diretamente o seguinte mixin:

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

Isso funciona perfeitamente

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