Faire pivoter statiquement des icônes géniales


91

J'aimerais faire pivoter statiquement mes icônes impressionnantes de polices 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-rotate- * et fa-flip- *.

Cependant, faire

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

ne fonctionne pas, alors que le remplacement fa-rotate-45par le fa-rotate-90fait. Cela signifie-t-il qu'ils ne peuvent en fait pas tourner arbitrairement?

Réponses:


219

Avant FontAwesome 5:

Les déclarations standard contiennent juste .fa-rotate-90, .fa-rotate-180et .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 des «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' data-fa-transformattribut avec la valeur rotate-et la rotation souhaitée en degrés.

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


correspond aux conventions de dénomination de Font Awesome; agréable!
SoEzPz

N'oubliez pas de changer également la propriété d'affichage de l'icône de "inline" à "inline-block". La transformation ne fonctionnera pas sur les éléments en ligne. Plus dans cette discussion
Oksana Romaniv

15

Au cas où quelqu'un d'autre tomberait sur cette question et le voudrait, voici 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

Le nouveau Font-Awesome v5 a des transformations de puissance

Vous pouvez faire pivoter n'importe quelle icône en ajoutant un 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: Font-Awesome5 Power Tranforms


9

Si vous souhaitez faire pivoter 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 */
}

3

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

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

0

Cela fonctionne parfaitement

<i class="fa fa-power-off text-gray" style="transform: rotate(90deg);"></i>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.