Icons drehen
Manchmal müssen Sie ein Symbol drehen oder spiegeln, damit es in Ihrem Projekt oder Design funktioniert. Font Awesome hat einige schnelle Dienstprogramme integriert, die Ihnen dabei helfen.
Um Symbole beliebig zu drehen und zu spiegeln, verwenden Sie die Klassen fa-rotate-* und fa-flip-*, wenn Sie auf ein Symbol verweisen.
Drehung von Icons in Grad
<!-- Drehung von Icons in Grad -->
<div class="fa-3x">
<i class="fa-solid fa-snowboarding"></i>
<i class="fa-solid fa-snowboarding fa-rotate-90"></i>
<i class="fa-solid fa-snowboarding fa-rotate-180"></i>
<i class="fa-solid fa-snowboarding fa-rotate-270"></i>
</div>
| Klasse | Beschreibung |
|---|---|
fa-rotate-90 |
Dreht ein Symbol um 90° |
fa-rotate-180 |
Dreht ein Symbol um 180° |
fa-rotate-270 |
Dreht ein Symbol um 270° |
Spiegelung von Icons (Flip)
<!-- Spiegelung von Icons (Flip) -->
<div class="fa-3x">
<i class="fa-solid fa-snowboarding"></i>
<i class="fa-solid fa-snowboarding fa-flip-horizontal"></i>
<i class="fa-solid fa-snowboarding fa-flip-vertical"></i>
<i class="fa-solid fa-snowboarding fa-flip-both"></i>
</div>
| Klasse | Beschreibung |
|---|---|
fa-flip-horizontal |
Spiegelt ein Symbol horizontal |
fa-flip-vertical |
Spiegelt ein Symbol vertikal |
fa-flip-both |
Spiegelt ein Symbol sowohl vertikal als auch horizontal |
Mehr Informationen
Benutzerdefinierte CSS-Eigenschaft hinzugefügt, um rotierende Symbole anzupass
Benutzerdefinierte Drehung
Kombinieren von Drehen und Spiegeln