Rotar estáticamente iconos de fuentes impresionantes

93

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?

user592419
fuente

Respuestas:

227

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

KittMedia
fuente
coincide con las convenciones de nomenclatura de Font Awesome; ¡bonito!
SoEzPz
No olvide cambiar también la propiedad de visualización del icono de "inline" a "inline-block". La transformación no funcionará en elementos en línea. Más en esta discusión
Oksana Romaniv
15

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);
}
PseudoNinja
fuente
12

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

Noopur Dabhi
fuente
9

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 */
}
Peter Mortensen
fuente
3

Si usa Less , puede usar directamente el siguiente mixin:

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

Esto funciona perfectamente

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