Drehen Sie statisch beeindruckende Symbole statisch

91

Ich möchte meine Schriftarten-Symbole statisch um 45 Grad drehen. Auf der Website heißt es:

Verwenden Sie die Klassen fa-rotate- * und fa-flip- *, um Symbole willkürlich zu drehen und umzudrehen.

Allerdings tun

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

funktioniert nicht, während das Ersetzen fa-rotate-45durch fa-rotate-90. Bedeutet dies, dass sie sich tatsächlich nicht willkürlich drehen können?

css rotation font-awesome

— user592419
quelle

219

Vor FontAwesome 5:

Die Standard - Erklärungen nur enthalten .fa-rotate-90, .fa-rotate-180und .fa-rotate-270. Sie können jedoch ganz einfach Ihre eigenen erstellen:

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

Mit FontAwesome 5:

Sie können sogenannte "Power Transforms" verwenden. Beispiel:

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

Sie müssen das data-fa-transformAttribut mit dem Wert von rotate-und Ihrer gewünschten Drehung in Grad hinzufügen .

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

— KittMedia
quelle

entspricht den Namenskonventionen von Font Awesome; nett!

— SoEzPz

Vergessen Sie nicht, auch die Anzeigeeigenschaft des Symbols von "Inline" in "Inline-Block" zu ändern. Die Transformation funktioniert nicht mit Inline-Elementen. Mehr in dieser Diskussion

— Oksana Romaniv

15

Für den Fall, dass jemand anderes auf diese Frage stößt und sie hier haben möchte, ist das SASS-Mixin, das ich verwende.

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

— PseudoNinja
quelle

12

Das neue Font-Awesome v5 verfügt über Power Transforms

Sie können jedes Symbol drehen, indem Sie dem data-fa-transformSymbol ein Attribut hinzufügen

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

Hier ist eine Geige

Weitere Informationen finden Sie unter: Font-Awesome5 Power Tranforms

— Noopur Dabhi
quelle

9

Wenn Sie um 45 Grad drehen möchten, können Sie die CSS-Transformationseigenschaft verwenden:

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

— Peter Mortensen
quelle

3

Wenn Sie Less verwenden , können Sie direkt das folgende Mixin verwenden:

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

— StackHola
quelle

0

Das funktioniert perfekt

<i class="fa fa-power-off text-gray" style="transform: rotate(90deg);"></i>

— James Ass
quelle