Fuente de rotación estática-iconos impresionantes

Me gustaría rotar estáticamente mis iconos font-awesome en 45 grados. Dice en el sitio que:

Para rotar y voltear iconos 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 por fa-rotate-90 sí funciona. ¿Significa esto que de hecho no pueden rotar arbitrariamente?

Author: Peter Mortensen, 2014-03-30
Source

5 answers

Las declaraciones estándar solo contienen .fa-rotate-90, .fa-rotate-180 y .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);
}
 176
Author: KittMedia,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-03-30 17:27:38

En caso de que alguien se tropieza con esta pregunta y quiere que aquí es el SASS mixin 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);
}
 12
Author: PseudoNinja,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-22 14:26:12

Si desea rotar 45 grados, puede usar la propiedad 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 */
}
 7
Author: Peter Mortensen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-04-11 09:24:56

Nueva fuente-Awesome v5 tiene Poder Transforma

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

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

Aquí hay un violín

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

 6
Author: Noopur Dabhi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-02-08 09:40:24

Si usa Menos puede usar directamente la siguiente mezcla:

.@{fa-css-prefix}-rotate-90  { .fa-icon-rotate(90deg, 1);  }
 3
Author: StackHola,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-04-11 09:26:57