Siehe auch: We're upgrading our icons to Font Awesome 6!
Wir werden in Kürze einen Branch in master mergen, der Discourse auf Font Awesome 5.5.0 (die kostenlose Version) aktualisiert und auf die Verwendung von SVG-Icons statt einer Icon-Schriftart umstellt. Dies ist eine erhebliche Änderung mit vielen Vorteilen und einer signifikanten Änderung für Entwickler.
Hier ist eine kurze Übersicht der Änderungen:
- Die Verwendung von SVG-Icons sorgt für schärfere Icons, ist besser für die Barrierefreiheit und einfacher anzupassen; weitere Details finden Sie in diesem GitHub-Artikel.
- Da die Font Awesome-Icon-Sammlung in Version 5 auf über 1300 Icons angewachsen ist, haben wir eine interne API entwickelt, die Clients eine Teilmenge aller FA-Icons bereitstellt, nämlich nur die Icons, die von dieser Discourse-Instanz verwendet werden.
- Die Teilmenge hat zum Glück eine kleinere Dateigröße: Sie läuft bereits hier in Meta und beträgt nur 27,5 kB im Vergleich zu den 75,7 kB der FA 4.7-Icon-Schriftart.
- Plugins und Themes (einschließlich Theme-Komponenten) können zusätzliche FA-Icons zur Sammlung hinzufügen.
- Gruppen-Flair- und Badge-Icons werden automatisch in die Sammlung aufgenommen, und Site-Administratoren können auch eine neue Site-Einstellung namens
svg icon subsetverwenden, um ihre gewählten Icons zu registrieren und zur Teilmenge ihrer Site hinzuzufügen. - Breaking Change: Plugin- und Theme-Entwickler können
\u003ci class="fa fa-icon"\u003e\u003c/i\u003enicht mehr verwenden oder die:before-Pseudoselektoren überschreiben, um auf Icons zu verweisen oder diese zu ersetzen. Stattdessen sollten nun Discourse-Funktionen verwendet werden, die SVGs in die Seite einfügen.
Im Folgenden finden Sie Anweisungen zur Aktualisierung von Plugins und Themes, um Icons aus dem neuen Set zu verwenden.
Was ist neu in Font Awesome 5?
Font Awesome 5 hat viele neue Icons eingeführt, aber auch einige Namensänderungen vorgenommen. Für eine vollständige Diskussion der Änderungen siehe die Font Awesome-Upgradedokumentation. Die Hauptänderung besteht darin, dass Icons in FA jetzt in separaten Stilen vorliegen. Es gibt drei Stile:
- solid (Standard) –
fas - regular –
far - brands –
fab
Für die Styles regular oder brands führt FA 5 neue Klassenpräfixe ein, nämlich „far" bzw. „fab". Um ein Icon aus dem Style regular oder brands zu verwenden, müssen wir also diese neue Namenskonvention verwenden: \"far fa-address-book\" oder \"fab fa-facebook\". (Solid-Icons können einfach wie zuvor als „fa-icon-name" referenziert werden.)
Um das Bündeln der drei Stile in einem SVG-Sprite zu ermöglichen, werden Icons im Style regular und brand in Discourse intern in far-icon-name und fab-icon-name umgewandelt. Plugins, Themes, Gruppen-Flairs und Badges können die Standard-Namenskonvention von FontAwesome 5 verwenden. Site-Administratoren, die über die Site-Einstellung svg icon subset Icons zur Sammlung hinzufügen, müssen die interne Namenskonvention verwenden.
Entwickler: So verwenden oder fügen Sie ein SVG-Icon in Ihrem Plugin oder Theme hinzu
-
Hinzufügen neuer Icons
Plugins:
Registrieren Sie das Icon in der Datei
plugin.rbIhres Plugins:register_svg_icon "user-times" if respond_to?(:register_svg_icon)(Hinweis: Sie müssen Ihren Rails-Server in Ihrer Entwicklungsumgebung neu starten, damit diese Änderung wirksam wird.)
Themes oder Komponenten:
Fügen Sie eine Zeichenketten- oder Listen-Einstellung mit einem Namen hinzu, der
_iconenthält, zum Beispiel:svg_icons: default: 'question-circle|wallet' type: 'list' list_type: 'compact'Discourse wird dann das/die in dieser Theme-Einstellung definierte(n) Icon(s) zur Teilmenge hinzufügen.
-
Verwendung von Icons in Ihrem JavaScript
Plugins:
import { iconNode } from "discourse-common/lib/icon-library"; ... let icon = iconNode('user-times');oder verwenden Sie den Helper
iconHTML:import { iconHTML } from "discourse-common/lib/icon-library"; ... let icon = iconHTML('user-times');Themes oder Komponenten:
const { iconNode } = require("discourse-common/lib/icon-library"); ... let icon = iconNode('user-times');oder verwenden Sie den Helper
iconHTML:const { iconHTML } = require("discourse-common/lib/icon-library"); ... let icon = iconHTML('user-times');Die Helper können auch einen zweiten Parameter mit Eigenschaften wie Titel oder Klasse entgegennehmen. Dies funktioniert in Plugins und Themes / Komponenten auf die gleiche Weise, zum Beispiel:
iconHTML('user-times', { class: "reply-to-glyph" }) -
Verwendung von Icons in Ihren Handlebars-Templates
In Handlebars-Templates können Sie
d-iconwie folgt verwenden:{{d-icon 'user-times'}}Dies funktioniert auch in Plugins und Themes / Komponenten auf die gleiche Weise.
Hinzufügen benutzerdefinierter Icons
Wenn Sie mehr Icons haben möchten als in FontAwesome verfügbar, können Sie Ihre eigenen SVG-Icons in einem Plugin oder einem Theme hinzufügen. Sehen Sie sich dieses SVG-Sprite als Beispiel an, wie Sie Ihr Sprite strukturieren können. (Es ist im Wesentlichen eine Liste von \u003csymbol\u003e-Elementen, jedes mit einer eigenen eindeutigen ID.)
In Themes und Komponenten: Fügen Sie das SVG-Sprite im Ordner /assets hinzu und verweisen Sie in about.json mit dem Variablennamen icons-sprite darauf. Für ein Sprite namens my-icons.svg sollte Ihre assets.json Folgendes enthalten:
"assets": {
"icons-sprite": "/assets/my-icons.svg"
}
Sie können das SVG-Sprite auch über die Benutzeroberfläche zu einem Theme oder einer Komponente hinzufügen. Stellen Sie dabei sicher, dass der SCSS-Variablenname auf icons-sprite gesetzt ist. Screenshot:
In Plugins: Fügen Sie einfach eine SVG-Sprite-Datei im Ordner plugins/your-plugin-name/svg-icons hinzu. Starten Sie Ihren Server neu (wenn in der Entwicklung) oder erstellen Sie die Site in einem Docker-Container neu, und Ihre benutzerdefinierten Icons sollten automatisch verfügbar sein.
Um potenzielle Konflikte mit Font Awesome-Icon-IDs zu vermeiden, sollten Sie die IDs der benutzerdefinierten Icons in Ihrem Plugin oder Theme mit einem Präfix versehen.
)
