Tutrix.dedeine Community für wpForo
wpForo verwendet Font Awesome Icons
Je nach Anwendung / Darstellung kann es notwendig sein diese zu drehen
Dies geht durch das Hinzufügen einer Klasse
Als Beispiel dient hier mal das fa-reply Icon
der normale Code
sowie die unten in der Tabelle aufgeführten Drehvarianten
| Icon | Klasse | Drehwert | Ergebnis |
|---|---|---|---|
| ohne | keine Änderung | ||
| fa-rotate-90 | dreht das Icon um 90° | ||
| fa-rotate-180 | dreht das Icon um 180° | ||
| fa-rotate-270 | dreht das Icon um 270° | ||
| fa-flip-horizontal | spiegelt das Icon horizontal | ||
| fa-flip-vertical | spiegelt das Icon vertikal | ||
| fa-flip-both | spiegelt das Icon horizontal und vertikal |
Es gibt noch "fa-spin" und "fa-pulse" um die Icons zu animieren
Beispiel für das Spinner_Icon
| Icon | Klasse | Drehwert | Ergebnis |
|---|---|---|---|
| fa-spin | animiert das Icon drehend | ||
| fa-spin | Beispiel das Sync-Icon drehend animiert | ||
| fa-spin | animiert das Spinner-Icon drehend | ||
| fa-pulse | animiert das Spinner-Icon pulsierend |
Ich arbeite mit diesen Programmen sowie Plattformen für Softwareentwickler
Für den Fall, dass du dich bedanken und die Community unterstützen möchtest 
( 1 Like )
Hi @tutrix
Danke für dieses Tutorial 
Aber mal eine Frage, kann man diese Awesome Icons auch drehen ohne den Code in der Datei selbst zu ändern?
Gib deine Träume nicht auf - schlafe weiter!
Zuerst schließen wir die Augen, dann sehen wir weiter.
Ja das geht "auch" mit CSS "transform" und "rotate" bzw. scale()
Das "auch" in Anführungszeichen bedeutet, dass die oben aufgeführten Formatierungen ja ebenfalls über CSS in der fontawesome-all.min.css eingetragen sind.
Icon mit der Maus markieren und dann über den Browser Inspektor den <i> Tag suchen
Beispiel mal der alles gelesen Haken
damit auch nur dieses Icon per CSS angesprochen wird und nicht alle Haken (fa-check)
sollten die umschließenden Klassen, IDs eingebunden werden
in diesem Fall also
die ID #wpforo-stat-body
und die Klasse .wpf-all-read
der vollständige CSS Code für (fa-rotate-180 = transform: rotate(180deg);)
für spiegeln kann man den negativen Wert und (x & y) bei scale() verwenden also scaley(-1) bzw. scalex(-1)
vertikal spiegeln = transform: scaley(-1);
horizontal spiegeln = transform: scalex(-1);
eine gute Seite mit HTML und CSS Tutorials ist z.B. diese
https://www.w3schools.com/css/tutorials
Ich arbeite mit diesen Programmen sowie Plattformen für Softwareentwickler
Für den Fall, dass du dich bedanken und die Community unterstützen möchtest
( 1 Like )
Danke für die schnelle Antwort 
Wünsche dir noch schöne Feiertage
Gib deine Träume nicht auf - schlafe weiter!
Zuerst schließen wir die Augen, dann sehen wir weiter.
( 1 Like )von: @garfield
Wünsche dir noch schöne Feiertage
Danke, dir auch schöne Feiertage
Ich arbeite mit diesen Programmen sowie Plattformen für Softwareentwickler
Für den Fall, dass du dich bedanken und die Community unterstützen möchtest
MitgliedAktives Mitglied
Registriert: 23.07.2024 12:42
Zuletzt online: 24.07.2024 21:37
Status:
Themen: 1
Beiträge: 2
Likes erhalten: 3
Likes gegeben: 1
Reputations Punkte: 5
Themen / Beiträge von Dim
Legende: Administratoren, Moderatoren, Mitglieder, Gäste, Bots
