Problem bei der Verwendung eines benutzerdefinierten Symbols mit Tag Icons

[kristof_mulier]

Hallo @pmusaraj,

ich habe das Tag-Icons-Themen-Modul installiert. Hier sind meine aktuellen Einstellungen:

Ich habe drei Tags definiert, die jeweils mit einem Font Awesome-Icon verknüpft sind:

• bug-showstopper verknüpft mit skull-crossbone
• bug-major verknüpft mit exclamation-triangle
• bug-minor verknüpft mit exclamation-circle

Das funktioniert einwandfrei. Allerdings versuche ich nun, das vierte Tag beetle mit meiner hochgeladenen SVG-Datei beetle-face.svg zu verknüpfen. Leider funktioniert das nicht.

Wie kann ich meine eigene SVG-Datei ordnungsgemäß mit einem Tag verknüpfen? Bitte hilf mir Schritt für Schritt. Ich bin hier auf Discourse noch ein absoluter Anfänger (habe heute erst angefangen) und habe nur begrenzte Kenntnisse in Webtechnologien.

Vielen Dank

[pmusaraj (Penar Musaraj)]

Hallo @kristof_mulier, willkommen bei Discourse!

So fügst du ein benutzerdefiniertes Symbol hinzu:

@pmusaraj

Benutzerdefinierte Symbole hinzufügen

Wenn du mehr Symbole möchtest als die, die in FontAwesome verfügbar sind, kannst du deine eigenen SVG-Symbole in einem Plugin oder einem Theme hinzufügen. Sieh dir dieses SVG-Sprite als Beispiel an, wie du dein Sprite strukturierst. (Es ist im Wesentlichen eine Liste von <symbol>-Elementen, jedes mit einer eigenen eindeutigen ID.)

In Themes und Komponenten: Füge das SVG-Sprite im Ordner /assets hinzu und verweise in about.json über den Variablennamen icons-sprite darauf. Für ein Sprite namens my-icons.svg sollte deine about.json Folgendes enthalten:

"assets": {
   "icons-sprite": "/assets/my-icons.svg"
}

Du kannst das SVG-Sprite auch über die Benutzeroberfläche zu einem Theme oder einer Komponente hinzufügen. Achte dabei darauf, dass der SCSS-Var-Name auf icons-sprite gesetzt ist. Screenshot:

Im Grunde musst du das SVG-Symbol zu einem Sprite hinzufügen, ihm eine ID geben und dann das Sprite zum Theme hinzufügen und den Variablennamen dafür auf icons-sprite setzen. Sobald das erledigt ist, kannst du die ID des Symbols genauso verwenden wie die IDs der FA-Symbole (und verwende dabei nicht das $-Zeichen).

[kristof_mulier]

Wunderbar, das hat hervorragend funktioniert!
Danke @pmusaraj!
Du bist großartig