Ruota staticamente le icone fantastiche dei caratteri

Vorrei ruotare staticamente di 45 gradi le mie fantastiche icone dei caratteri. Sul sito si dice che:

Per ruotare e capovolgere arbitrariamente le icone, usa le classi fa-rotate- * e fa-flip- *.

Tuttavia, facendo

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

non funziona, mentre la sostituzione fa-rotate-45con fa-rotate-90fa. Ciò significa che di fatto non possono ruotare arbitrariamente?

Prima di FontAwesome 5:

Le dichiarazioni standard contengono solo .fa-rotate-90, .fa-rotate-180e .fa-rotate-270. Tuttavia puoi facilmente crearne uno tuo:

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

Con FontAwesome 5:

È possibile utilizzare i cosiddetti "Power Transforms". Esempio:

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

È necessario aggiungere l' data-fa-transformattributo con il valore di rotate-e la rotazione desiderata in gradi.

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

Nel caso in cui qualcun altro si imbattesse in questa domanda e la volesse, ecco il mixin SASS che 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);
}

Il nuovo Font-Awesome v5 ha Power Transforms

Puoi ruotare qualsiasi icona aggiungendo un attributo data-fa-transformall'icona

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

Ecco un violino

Per ulteriori informazioni, dai un'occhiata a: Font-Awesome5 Power Tranforms

Se vuoi ruotare di 45 gradi, puoi usare la proprietà di trasformazione CSS:

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

Se usi Less puoi usare direttamente il seguente mixin:

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

Funziona perfettamente

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