 |
Zusammenfassung | Discourse FontAwesome Pro ermöglicht die Verwendung von Font Awesome Pro-Icons in Discourse mit einer FontAwesome-Lizenz, indem der NPM-Paket-Token Ihres Kontos verwendet wird. |
 |
Repository-Link | https://github.com/discourse/discourse-fontawesome-pro |
 |
Installationsanleitung | So installieren Sie Plugins in Discourse |
Konfiguration
Dafür sind einige zusätzliche Schritte erforderlich, um es im Vergleich zu einem normalen Plugin zu aktivieren:
Zuerst müssen Sie eine zusätzliche Umgebungsvariable mit Ihrem Font Awesome Pro-Paket-Token einrichten (beachten Sie, dass dieser sich von Ihrem API-Token unterscheidet): DISCOURSE_FONTAWESOME_AUTH_TOKEN
Das Installationsskript muss auch während der Initialisierung als zusätzlicher „after_code“-Hook aufgerufen werden. Dabei werden die FontAwesome-Pro-SVGs beim Build mit Ihrem Auth-Token heruntergeladen und hinzugefügt. Dies ist ein zusätzlicher Block, der getrennt vom Plugin-Clone-Block ist.
Hier ist ein Beispiel für die Installation in app.yml:
env:
DISCOURSE_FONTAWESOME_AUTH_TOKEN: 123456
hooks:
after_code:
- exec:
cd: $home/plugins
cmd:
- git clone https://github.com/discourse/discourse-fontawesome-pro.git
- exec:
cd: $home/plugins/discourse-fontawesome-pro
raise_on_fail: false
cmd:
- $home/plugins/discourse-fontawesome-pro/scripts/install.sh
Auswahl einer Override-Familie:
In den Admin-Einstellungen können Sie die Standard-Icon-Familie von Discourse überschreiben:
Auswahl eines Override-Stils:
Sie können auch den Standard-Icon-Stil überschreiben:
Duotone
Um die volle Kontrolle über die Duotone-Unterstützung zu erhalten, müssen Sie das folgende CSS (in einem Theme oder anderweitig) überschreiben und durch Ihr eigenes Farbschema ersetzen:
svg {
--fa-secondary-color: red;
--fa-secondary-opacity: 0.6;
}
Um einzelne Icons zu färben, verweisen Sie auf die ID des SVG:
#fad-search .fa-secondary {
--fa-secondary-color: red;
--fa-secondary-opacity: 0.6;
}
Duotone-Styling-Update
Wenn Sie klassenbasierte Selektoren wie diese verwenden:.fa-secondary { color: red; }müssen Sie Ihr Styling aktualisieren, um stattdessen CSS-Custom-Properties zu verwenden. Klassenbasierte Farb-Overrides funktionieren nicht mehr, da sie in Font Awesome v7 entfernt wurden
Im Hintergrund wird das FontAwesome-Repository verwendet, um Schriftarten in den SVG-Ordner des Plugins zu installieren, und Discourse kann die Sprites von dort übernehmen.