Hallo 
Dieses Thema enthält zwei Theme-Komponenten.
Discourse Easy SVG Icon CSS
Diese Theme-Komponente ist als Vorlage funktional. Bitte forken Sie sie auf Github oder verwenden Sie den Code für Ihr Projekt. Sie können die SVG-Icon-Codes aus dem SCSS entfernen und nur diejenigen behalten, die Sie wirklich verwenden… Ich habe die
mixin-Datei in diecommon.scss-Datei importiert, sodass Sie Ihren Code unterhalb dieser Zeile oder separat im Desktop- oder Mobilbereich hinzufügen können.
Die Theme-Komponente fügt die Fähigkeit hinzu, SVG-Icons in Ihrem CSS wartbar und einfach bearbeitbar zu halten. Die Komponente enthält alle SVG-Icons, die Sie hier finden: discourse/vendor/assets/svg-icons/fontawesome at main · discourse/discourse · GitHub
Wie zu verwenden?
Parameter festlegen:
$icon-set: brands, regular, solid
$icon-name: Icon-Name
$icon-color: Icon-Farbe (currentColor, Hex oder Farbvariable)
$width und $height: die Größe des hinzugefügten Icons
Es sieht so aus:
@include svg-icon($icon-set, $icon-name, $icon-color, $width, $height);
Verwendung von currentColor
Hier ist ein Beispiel, um ein solides Raketen-Icon vor dem Latest-Navigationsmenüpunkt hinzuzufügen.
#navigation-bar {
li.nav-item {
&_latest {
a {
gap: 0.5em;
&:before {
content: "";
@include svg-icon(solid, rocket, currentColor, 1em, 1em);
}
}
}
}
}
Verwendung der Farbvariable var(--gold)
Hier ist ein Beispiel, um ein goldenes Standard-Stern-Icon vor dem Top-Navigationsmenüpunkt hinzuzufügen.
#navigation-bar {
li.nav-item {
&_top {
a {
gap: 0.5em;
&:before {
content: "";
@include svg-icon(regular, star, var(--gold), 1em, 1em);
}
}
}
}
}
Wir können den Icon-Satz, die Farbe oder sogar das Icon beim Hovern usw. leicht ändern… Mal sehen!
Jetzt ändern wir das Standard-Icon in ein solides, wenn wir den Button mit der Maus bewegen.
#navigation-bar {
li.nav-item {
&_top {
a {
gap: 0.5em;
&:hover,
&:focus,
&.active {
&:before {
@include svg-icon(solid, star, currentColor, 1em, 1em);
}
}
&:before {
content: "";
@include svg-icon(regular, star, currentColor, 1em, 1em);
}
}
}
}
}
Discourse Easy Emoji CSS
mixin-Datei in diecommon.scss-Datei importiert, sodass Sie Ihren Code unterhalb dieser Zeile oder separat im Desktop- oder Mobilbereich hinzufügen können.
Wie zu verwenden?
Die Verwendung ist ähnlich wie bei der SVG-Version.
Parameter festlegen:
$emoji-set: apple, google, twitter, win10, google_classic, facebook_messenger
$emoji-name: Emoji-Name
$width und $height: die Größe des hinzugefügten Emojis
@include emoji($emoji-set, $emoji-name, $width, $height);
Hier ist ein Beispiel, um ein facebook_messenger rocket-Emoji vor dem Latest- und ein twitter star-Emoji vor dem Top-Navigationsmenüpunkt hinzuzufügen.
#navigation-bar {
li.nav-item {
&_latest {
a {
gap: 0.5em;
&:before {
content: "";
@include emoji(facebook_messenger, rocket, 1em, 1em);
}
}
}
&_top {
a {
gap: 0.5em;
&:before {
content: "";
@include emoji(twitter, star, 1em, 1em);
}
}
}
}
}
Hat es bei dir endlich funktioniert? Gibt es einen bestimmten Anwendungsfall, in dem du das verwenden möchtest? Wenn du einige Details teilst, kann ich eine separate Theme-Komponente darauf basierend erstellen, wo sie mit Einstellungen leicht modifizierbar ist.
.
