Rotation statique des icons de font-awesome

Je voudrais faire pivoter statiquement mes icons impressionnantes de 45 degrés. Il dit sur le site que:

Pour faire pivoter et retourner arbitrairement les icons, utilisez les classes fa-rotate- * et fa-flip- *.

Cependant, faire

 

ne fonctionne pas, alors que le remplacement de fa-rotate-45 par fa-rotate-90 fait. Est-ce que cela signifie qu’ils ne peuvent pas tourner de manière arbitraire?

Les déclarations standard ne contiennent que .fa-rotate-90 , .fa-rotate-180 et .fa-rotate-270 . Cependant, vous pouvez facilement créer les vôtres:

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

Si quelqu’un d’autre trébuche sur cette question et le souhaite, voici le mixage SASS que j’utilise.

 @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); } 

Si vous souhaitez effectuer une rotation de 45 degrés, vous pouvez utiliser la propriété de transformation CSS:

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

Nouvelle police-Awesome v5 a des transformations de puissance

Vous pouvez faire pivoter n’importe quelle icône en ajoutant l’atsortingbut data-fa-transform à l’icône

  

Voici un violon

Pour plus d’informations, consultez ceci: Font-Awesome5 Power Tranforms

Si vous utilisez moins, vous pouvez directement utiliser le mixin suivant:

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