Icons global ändern

[Discourse]

Dies ist eine einfache Methode, um ein Discourse-Icon global zu ändern.

1. Klicke mit der rechten Maustaste auf das Icon, das du ändern möchtest, und wähle „Element untersuchen“ oder „Untersuchen“ (je nach Browser).

2. Finde den Namen des Icons
   

   

3. Suche ein neues Icon hier: Find Icons with the Perfect Look & Feel | Font Awesome, z. B. external-link-alt

4. Passe den Code an und füge ihn in deinem Tab admin > customize > themes > edit code -> JS hinzu.

// {theme}/javascripts/discourse/api-initializers/init-theme.gjs

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  api.replaceIcon("link", "external-link-tab");
});

5. Icons, die standardmäßig nicht von Discourse verwendet werden, müssen in der Site-Einstellung svg icon subset hinzugefügt werden. Danach erzwingen Sie einen Browser-Refresh, um die Änderungen zu sehen.
   Ergebnis:
   
   Alle „link“-Icons werden durch „external-link-tab“ ersetzt.
   Wenn ein Icon für mehrere Elemente auf anderen Seiten verwendet wird, wie z. B. bei Abzeichen, wird das Icon auch dort ersetzt.

---

Ausnahmen

Beachte, dass es bereits ein Theme-Component gibt, das dir erlaubt, das Like-Icon zu ändern. Ich verwende diesen Fall als Beispiel.

Das „heart“-Icon, das zum Liken verwendet wird, ist mit anderen Namen ('d-liked' und 'd-unliked') hardcoded und sollte anders behandelt werden als andere Icons. Um das -Icon durch das -Icon zu ersetzen:

api.replaceIcon("d-liked", "thumbs-up");
api.replaceIcon("d-unliked", "thumbs-o-up");

Aber auf der Abzeichen-Seite ist das Icon immer noch „heart“:

Um es auf dieser Seite zu ändern, fügen wir hinzu:

api.replaceIcon("heart", "thumbs-up");

Ein weiteres Beispiel:

api.replaceIcon("d-watching", "eye");

ändert das Watching-Icon:

Siehe hier andere Ausnahmen, die den Tracking-Status, Expand/Collapse, Benachrichtigungen und Likes abdecken.

const REPLACEMENTS = {
  "d-tracking": "bell",
  "d-muted": "discourse-bell-slash",
  "d-regular": "far-bell",
  "d-watching": "discourse-bell-exclamation",
  "d-watching-first": "discourse-bell-one",
  "d-drop-expanded": "caret-down",
  "d-drop-collapsed": "caret-right",
  "d-unliked": "far-heart",
  "d-liked": "heart",
  "d-post-share": "link",
  "d-topic-share": "link",
  "notification.mentioned": "at",
  "notification.group_mentioned": "users",
  "notification.quoted": "quote-right",
  "notification.replied": "reply",
  "notification.posted": "reply",
  "notification.edited": "pencil-alt",
  "notification.bookmark_reminder": "discourse-bookmark-clock",
  "notification.liked": "heart",
  "notification.liked_2": "heart",
  "notification.liked_many": "heart",
  "notification.liked_consolidated": "heart",
  "notification.private_message": "far-envelope",
  "notification.invited_to_private_message": "far-envelope",
  "notification.invited_to_topic": "hand-point-right",
  "notification.invitee_accepted": "user",
  "notification.moved_post": "sign-out-alt",
  "notification.linked": "link",
  "notification.granted_badge": "certificate",
  "notification.topic_reminder": "far-clock",
  "notification.watching_first_post": "discourse-bell-one",
  "notification.group_message_summary": "users",
  "notification.post_approved": "check",
  "notification.membership_request_accepted": "user-plus",
  "notification.membership_request_consolidated": "users",
  "notification.reaction": "bell",
  "notification.votes_released": "plus",
  "notification.chat_quoted": "quote-right",
};

Ref: discourse/icon-library.js at main · discourse/discourse (github.com)

---

Fühle dich frei, andere Theme-Components zu erstellen und sie in unserer Kategorie Customization > Theme component zu teilen!

---

Dieses Dokument ist versioniert – schlage Änderungen auf GitHub vor.