Tutrix.dedeine Community für wpForoinoffizieller deutscher wpForo Support

wpForo: Font Awesom...
 
Teilen:
Benachrichtigungen
Alles löschen

V 1: Tipps und Tricks wpForo: Font Awesome Icons drehen

5 Beiträge
2 Benutzer
3 Likes
1,192 Ansichten
Tutrix
@tutrix
Aktives Mitglied Administrator Support Team
Themen: 77
Beiträge: 482
Punkte: 799
Thema gestartet
 

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

<i class="fas fa-reply"></i>

sowie die unten in der Tabelle aufgeführten Drehvarianten

<i class="fas fa-reply fa-rotate-90"></i>
<i class="fas fa-reply fa-rotate-180"></i>
<i class="fas fa-reply fa-rotate-270"></i>
<i class="fas fa-reply fa-flip-horizontal"></i>
<i class="fas fa-reply fa-flip-vertical"></i>
<i class="fas fa-reply fa-flip-both"></i>
<i class="fas fa-reply fa-spin"></i>
<i class="fas fa-sync fa-spin"></i>

 

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

<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-spinner fa-pulse"></i>

 

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 Buy me a coffee

 
Beitrag veröffentlicht am : 20.12.2020 10:49
Garfield Garfield hat den Beitrag bewertet
Profil-Infos von Tutrix
Registriert seit: 20.01.2020 Webseite: https://www.tutrix.de Land: Germany Stadt: München
Installierte Erweiterungen:   wpForo Addons | Wordpress Addons | Scripte
wpForo Topic Prefix & Tags Manager wpForo Ads Manager wpForo User Custom Fields wpForo Private Messages wpForo Emoticons wpForo Advanced Attachments wpForo Embeds wpForo Syntax Highlighter wpForo User Mentioning WP-UserOnline Wise Chat Pro CleanTalk AntiSpam Code Snippets CM Glossary Tooltip Animate On Scroll Library Toggle Funktion
Themen Schlagwörter

Anzeige




Garfield
@garfield
Aktives Mitglied Moderator Support Team
Themen: 6
Beiträge: 32
Punkte: 53
 

Hi @tutrix Tutrix

Danke für dieses Tutorial :200:  

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.

 
Beitrag veröffentlicht am : 24.12.2020 14:35
Profil-Infos von Garfield
Registriert seit: 26.04.2020 Webseite: Land: Germany Stadt: Hamburg
Installierte Erweiterungen:   wpForo Addons | Wordpress Addons | Scripte
wpForo User Custom Fields wpForo Private Messages Wise Chat Pro Toggle Funktion

Anzeige




Tutrix
@tutrix
Aktives Mitglied Administrator Support Team
Themen: 77
Beiträge: 482
Punkte: 799
Thema gestartet
 

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

<i class="fas fa-check"></i>

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

#wpforo #wpforo-wrap #wpforo-stat-body .wpf-all-read i {
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);

Titel: Font Awesome Icons per CSS drehen

eine gute Seite mit HTML und CSS Tutorials ist z.B. diese

https://www.w3schools.com/

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 Buy me a coffee

 
Beitrag veröffentlicht am : 24.12.2020 15:42
Garfield Garfield hat den Beitrag bewertet
Profil-Infos von Tutrix
Registriert seit: 20.01.2020 Webseite: https://www.tutrix.de Land: Germany Stadt: München
Installierte Erweiterungen:   wpForo Addons | Wordpress Addons | Scripte
wpForo Topic Prefix & Tags Manager wpForo Ads Manager wpForo User Custom Fields wpForo Private Messages wpForo Emoticons wpForo Advanced Attachments wpForo Embeds wpForo Syntax Highlighter wpForo User Mentioning WP-UserOnline Wise Chat Pro CleanTalk AntiSpam Code Snippets CM Glossary Tooltip Animate On Scroll Library Toggle Funktion

Anzeige




Garfield
@garfield
Aktives Mitglied Moderator Support Team
Themen: 6
Beiträge: 32
Punkte: 53
 

Danke für die schnelle Antwort ::20::  

 

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.

 
Beitrag veröffentlicht am : 24.12.2020 17:42
Tutrix Tutrix hat den Beitrag bewertet
Profil-Infos von Garfield
Registriert seit: 26.04.2020 Webseite: Land: Germany Stadt: Hamburg
Installierte Erweiterungen:   wpForo Addons | Wordpress Addons | Scripte
wpForo User Custom Fields wpForo Private Messages Wise Chat Pro Toggle Funktion

Anzeige




Tutrix
@tutrix
Aktives Mitglied Administrator Support Team
Themen: 77
Beiträge: 482
Punkte: 799
Thema gestartet
 
von: @garfield 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 Buy me a coffee

 
Beitrag veröffentlicht am : 24.12.2020 17:46
Profil-Infos von Tutrix
Registriert seit: 20.01.2020 Webseite: https://www.tutrix.de Land: Germany Stadt: München
Installierte Erweiterungen:   wpForo Addons | Wordpress Addons | Scripte
wpForo Topic Prefix & Tags Manager wpForo Ads Manager wpForo User Custom Fields wpForo Private Messages wpForo Emoticons wpForo Advanced Attachments wpForo Embeds wpForo Syntax Highlighter wpForo User Mentioning WP-UserOnline Wise Chat Pro CleanTalk AntiSpam Code Snippets CM Glossary Tooltip Animate On Scroll Library Toggle Funktion

Anzeige




Teilen:
wpForo theme made with love a lot of time and coffee by Tutrix