Ja, sorry, ich hätte meinen Beitrag aktualisieren sollen. Ich habe herausgefunden, dass ich Font Awesome zu Setup hinzufügen musste.
Und wie du gesagt hast, habe ich kürzlich gelernt, dass man eine SVG-Sprite-Datei erstellen und in icons-sprites hochladen muss.
Ich lerne noch immer viele neue Dinge. Ich schätze die Hilfe, um mein Wissen weiterzuentwickeln. Vielen Dank.
Die Kategorie-Icons auf unserer Seite sahen bisher großartig aus, bis ich mich heute eingeloggt habe. Es scheint, als hätte der Abstand zwischen dem Icon und dem Kategoriennamen beim Anzeigen keinen Abstand mehr. Hat jemand anderes dieses Problem?
z. B…
Ich sehe das auch. Ich bin mir sicher, dass Penar das beheben wird, aber vorerst wird dies das Problem lösen.
.select-kit .select-kit-header .selected-name .name .d-icon {
margin-right: .25em;
}
Danke an euch beide, das sollte jetzt behoben sein.
Ist es möglich, andere Icons als Font Awesome zu verwenden? Mein Forum dreht sich um Reisen, und ich brauche sehr spezifische Icons, die dort nicht vorhanden sind. Können wir beispielsweise eine normale PNG-Icon-Datei verwenden, wie wir es bei Kategorien tun? Danke!
Sie können benutzerdefinierte Symbole verwenden, wenn Sie sie in SVGs konvertieren und über eine SVG-Sprite zu Ihrem Theme hinzufügen. Weitere Informationen zum Hinzufügen benutzerdefinierter Symbole zu Ihrer Website, die Sie dann in dieser Komponente (und auf Ihrer gesamten Discourse-Website) verwenden können, finden Sie im Abschnitt „Erstellen eines SVG-Spritesheets
Funktioniert super!
Kann ich es so anpassen, dass das Symbol nach dem Kategorientitel erscheint?
Bonusfrage: Ist es möglich, einen Tooltip/Alternativtext hinzuzufügen?
(Hintergrund: Ich blende das Schloss-Symbol aus und verwende stattdessen diese Komponente, um bei den wenigen öffentlichen Kategorien ein Symbol hinzuzufügen. Ich möchte, dass die Nutzer eine Möglichkeit haben, herauszufinden, was das Symbol bedeutet.)
Ich habe Probleme, meine benutzerdefinierten Icons zu verwenden. Ich habe nichts gefunden, das mir sagt, ob ich ein Präfix verwenden soll oder nicht. Hier ist, was ich tue.
Hier ist das von mir verwendete SVG – https://andronixforumupload.ams3.digitaloceanspaces.com/original/1X/bdabc28a604dc98bb25ce8af2ef6f8dc7c9f2626.svg
Wie Sie sehen können, wird das Arch-Icon überhaupt nicht angezeigt.
icons-sprite fest:
my-icon in Ihrer Spritesheet-Datei haben, schreiben Sie Folgendes:Ergebnis:
@Canapin Das funktioniert nicht. Hier ist meine Sprite-Datei – Sprite-Datei
Die Bild-ID, die ich verwende – Hier
So gehe ich vor –
Mache ich etwas falsch?
Versuchen Sie in Ihrem Sprite-Sheet, folgendes zu ersetzen:
<svg width="0" height="0" class="hidden">
Durch:
<svg xmlns="http://www.w3.org/2000/svg">
Außerdem ist es nicht erforderlich, die Icon-ID in den Einstellungsfeldern für SVG-Icons hinzuzufügen. Alle Ihre benutzerdefinierten Icons sind bereits in Ihrem hochgeladenen Sprite-Sheet verfügbar.
Meiner Meinung nach dient die Einstellung SVG-Icons dazu, zusätzliche Font Awesome-Icons zu laden, da Discourse standardmäßig nur eine festgelegte, kleine Auswahl lädt.
@Canapin Danke! Es hat wunderbar funktioniert. Ich habe jedoch noch eine Frage: Ist diese Spritdatei exklusiv für eine bestimmte Komponente, oder kann ich die Icons überall über ihre IDs aufrufen?
Wenn du eine Datei in ein bereits verwendetes Theme oder eine Theme-Komponente hochlädst, kannst du sie auch in jedem anderen verwenden. Du kannst deine Icon-IDs also überall nutzen.
Hey Penar, wird das das neue Font Awesome Pro-Plugin unterstützen? Oder gibt es eine Möglichkeit, es bereits zu nutzen, die ich übersehe? Danke!
Es sollte mit dem Pro-Plugin funktionieren, ja. Sehen Sie bei den Kategorien nur SVGs für Nicht-Pro-Icons?
Ja, nach dem Entfernen meines Sprites werden nur die Nicht-Pro-Versionen angezeigt. Außerdem berücksichtigen die Nicht-Pro-Versionen nicht die Einstellung fa_icon_style für helle Symbole usw.
Hmm, das funktioniert auf meiner lokalen Seite einwandfrei.
Das ist das Zahnradsymbol, wobei das Plugin mit dem Stil „Light
Hier ist ein Beispiel, bei dem es auf ‘light’ eingestellt ist. ‘Image Critiques’ hat das Icon comment-alt-edit und wird nicht angezeigt (es ist ein Pro-Icon). ‘Image Showcase’ hat das Icon images, das kein Pro-Icon ist, zeigt jedoch die reguläre Version an, nicht die ‘light’-Version. ‘Discussions’ zeigt die feste Version von comments an, und ‘Community’ zeigt wie erwartet die ‘light’-Version von users an.
Ich habe versucht, eines davon auf ‘cog’ zu ändern, und es funktioniert wie erwartet mit der korrekten ‘light’-Version. Hier läuft einiges seltsam!
Hast du es mit far-comment-alt-edit versucht?
Okay, ich habe es jetzt verstanden: Der Schlüssel ist, dass far- in der category icon list steht, nicht in svg icons. Also muss ich bei den Light-Icons alle zu fal- ändern, und sie folgen nicht der Site-Einstellung für fa icon style, oder?
