Rotar estáticamente iconos de fuentes impresionantes

Question 1

Me gustaría rotar estáticamente mis íconos de fuentes impresionantes en 45 grados. Dice en el sitio que:

Para rotar y voltear íconos arbitrariamente, use las clases fa-rotate- * y fa-flip- *.

Sin embargo, haciendo

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

no funciona, mientras que reemplazar fa-rotate-45con fa-rotate-90sí. ¿Significa esto que, de hecho, no pueden rotar arbitrariamente?

Question 2

Antes de FontAwesome 5:

Las declaraciones estándar solo contienen .fa-rotate-90, .fa-rotate-180y .fa-rotate-270. Sin embargo, puede crear fácilmente el suyo propio:

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

Puede utilizar lo que se denomina "Transformaciones de energía". Ejemplo:

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

Debe agregar el data-fa-transformatributo con el valor de rotate-y la rotación deseada en grados.

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

Question 3

En caso de que alguien más se tope con esta pregunta y la quiera aquí, es la mezcla SASS que 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);
}

Question 4

La nueva Font-Awesome v5 tiene transformaciones de energía

Puede rotar cualquier icono agregando un atributo data-fa-transformal icono

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

Aquí hay un violín

Para obtener más información, consulte esto: Font-Awesome5 Power Tranforms

Question 5

Si desea rotar 45 grados, puede usar la propiedad de transformación CSS:

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

Question 6

Si usa Less , puede usar directamente el siguiente mixin:

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

Question 7

Esto funciona perfectamente

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

Answer 1