web-dev-qa-db-fra.com

Faire pivoter de manière statique les icônes représentant une police géniale

Je voudrais faire pivoter mes icônes de font-awesome statiquement de 45 degrés. Il est dit sur le site que:

Pour faire pivoter et retourner les icônes de manière arbitraire, utilisez les classes fa-rotation- * et fa-retournement- *.

Cependant, faire

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

ne fonctionne pas, alors que remplacer fa-rotate-45 par fa-rotate-90 fonctionne. Est-ce que cela signifie qu'ils ne peuvent en fait pas effectuer de rotation arbitraire?

cssrotationfont-awesome
83
user592419

Avant FontAwesome 5:

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

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

Avec FontAwesome 5:

Vous pouvez utiliser ce que l’on appelle les "transformations de puissance". Exemple:

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

Vous devez ajouter l'attribut data-fa-transform avec la valeur rotate- et votre rotation souhaitée en degrés.

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

199
KittMedia

Au cas où quelqu'un d’autre trébucherait sur cette question et le voudrait, c’est le mixin 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);
}
12
PseudoNinja

New Font-Awesome v5 a Transformées de puissance

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

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

Voici un violon

Pour plus d'informations, consultez ceci: Transformations d'alimentation Font-Awesome5

10
Noopur Dabhi

Si vous voulez faire 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 */
}
9
user1877745

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

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