css - iconos - Estáticamente rotar íconos de fuentes increíbles

fontawesome io 3.2 1 icons

Question

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

Para girar 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-45 con fa-rotate-90 sí lo hace. ¿Significa esto que de hecho no pueden rotar arbitrariamente?

Answer 1

El nuevo Font-Awesome v5 tiene transformaciones de potencia

Puede rotar cualquier icono agregando el atributo data-fa-transform al ícono

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

Aquí hay un fiddle

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

Answer 2

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

Answer 3

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

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

Answer 4

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

Answer 5

Si usa Less , puede usar directamente la siguiente mixin:

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