Statisch rotieren font-awesome Symbole

Ich würde gerne statisch drehen meine font-awesome-icons um 45 Grad. Heißt es auf der Website:

Beliebig drehen und spiegeln Symbole, verwenden Sie die fa-drehen-* und fa-flip -* - Klassen.

Allerdings tun

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

nicht funktioniert, in der Erwägung, dass das ersetzen fa-rotate-45 mit fa-rotate-90 tut. Bedeutet dies, dass Sie in der Tat nicht beliebig drehen?

InformationsquelleAutor der Frage user592419 | 2014-03-30

  1. 162

    Die standard-Deklarationen enthalten nur .fa-rotate-90.fa-rotate-180 und .fa-rotate-270.
    Aber Sie können einfach erstellen Sie Ihre eigenen:

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

    InformationsquelleAutor der Antwort KittMedia

  2. 12

    Falls jemand stößt auf diese Frage und will, hier ist die SASS-mixin, die ich benutze.

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

    InformationsquelleAutor der Antwort PseudoNinja

  3. 6

    Wenn Sie wollen, drehen 45 Grad, können Sie mit der CSS-Eigenschaft transform:

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

    InformationsquelleAutor der Antwort

  4. 4

    Neuen Font-Awesome v5 hat Macht Verwandelt

    Können Sie drehen jedes Symbol durch hinzufügen von Attribut data-fa-transform Symbol

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

    Hier ist ein fiddle

    Für mehr Informationen, check this out : Font-Awesome5 Macht Wandelt

    InformationsquelleAutor der Antwort Noopur Dabhi

  5. 3

    Wenn Sie Weniger können Sie direkt verwenden Sie die folgenden mixin:

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

    InformationsquelleAutor der Antwort StackHola

Schreibe einen Kommentar