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.

[thegurjyot (Gurjyot Singh)]

Your post does help in changing icons globally but how to change the share icon in posts only? I do not want to change the link icon in the editor but, only in the posts. I checked the other posts in the forum but none of those work in the current build of Discourse, thus I am asking it here.

[Pad_Pors]

thanks for the clear guide. a small point:

is it possible to change d-watching to fas fa-eye and d-tracking to far fa-eye together?

if yes, how would one add the fas icon to the svg; as I tried adding fa-eye and this header:

<script type="text/discourse-plugin" version="0.8">
api.replaceIcon('d-watching', 'fa-eye');
api.replaceIcon('d-tracking', 'eye');
</script>

but the watching icon is not working.

---

also I was checking other icons such as bells, and I see even when I add bells to the svg icon subset it’s not loaded:

is there anything else I should do in order to be able to use bells?

[pmusaraj (Penar Musaraj)]

@Pad_Pors

even when I add bells to the svg icon subset it’s not loaded

Bells is a Pro icon, so it can’t be included, our default FA5 implementation only covers the free icons.

The solid eye icon is a bit of a special case: the FontAwesome 4 eye icon was moved to the regular bundle, so in Discourse we have a matcher for it that converts ‘eye’ to ‘far-eye’. Unfortunately, this stops you from using the solid ‘eye’ icon in Discourse, because Discourse will redirect eye to far-eye. If you absolutely must use that icon, you can copy the svg into a custom icon that you can rename to something of your liking, and add that to a theme or plugin.

[Pad_Pors]

thanks for the complete information , meanwhile I’ve tried several other icons, e.g. user-shield.

here is the header:
<script type="text/discourse-plugin" version="0.8">
api.replaceIcon('d-watching', 'fa-user-shield');
</script>

and I added fa-user-shield to the svg icon subset, but it still shows empty icon.

[pmusaraj (Penar Musaraj)]

Try without the “fa-” prefix for user-shield (both in the JS code and the site setting).

[Pad_Pors]

@pmusaraj

user-shield

still empty (tried with flag for easier snapshot):

[pmusaraj (Penar Musaraj)]

That works locally for me. Did you refresh the page after making these changes?

[Pad_Pors]

yes, refreshed with F5 and ctrl+R just to be sure!

is there anyway to look for possible errors?

[pmusaraj (Penar Musaraj)]

If you are familiar with the rails console, I would try logging in to the console and running SvgSprite.expire_cache and then refreshing the page to see if that does it.

[GuilhermeBac]

How to change the solid (fas fa-bookmark) to regular version (far fa-bookmark)?

Bookmark Filled Icon (Classic Solid) — Free SVG Download | Font Awesome

[P16]

@dax Is there a way to change the default heart icon to an emoji icon?

[pmusaraj (Penar Musaraj)]

Currently, no, you can only replace svg icons with other svg icons, not emojis.

[porterbayne]

Ist es möglich, eigene hinzugefügte SVG-Icons anstelle von FA-Icons zu verwenden?

[pmusaraj (Penar Musaraj)]

Ja, weitere Details finden Sie unter Introducing Font Awesome 5 and SVG icons.

[porterbayne]

Vielen Dank! Ich habe auch die Standard-SVG-Symbole von Discourse in einem Theme durch benutzerdefinierte Symbole ersetzt gefunden.

Am Ende habe ich das SVG-Sprite direkt in die Header-Datei eingebettet, da das Hochladen und Benennen, wie in dem Artikel beschrieben, bei mir nicht funktioniert hat (könnte natürlich auch ein Bedienfehler sein).

Mein Header sieht also so aus:

<svg width="0" height="0" class="hidden" style="display: none;">
    <symbol id="myicon-search" ..... </symbol>  
    <!-- all of my symbols here... -->
</svg>
<script type="text/discourse-plugin" version="0.8">
    api.replaceIcon('search', 'myicon-search'); 
</script>

Das lässt sich sehr einfach verwalten.

Ich verwende den SVG-Sprite-Generator unter https://svgsprit.es, um sicherzustellen, dass das Format korrekt ist.

[bekircem]

Können wir Microsofts Fabric Icons mit dieser Methode verwenden?

[pmusaraj (Penar Musaraj)]

Das sollte funktionieren, ja. Ich sehe keine offizielle SVG-Sprite-Verteilung dieser Icons, aber laut Where can I find the svg files of the icons? · Issue #1008 · OfficeDev/office-ui-fabric-core · GitHub können Sie die SVGs einzeln mit ihren Namen extrahieren.

[tomwrench]

@thegurjyot

Dein Beitrag hilft zwar dabei, Symbole global zu ändern, aber wie kann man das Teilen-Symbol nur in Beiträgen ändern? Ich möchte das Link-Symbol im Editor nicht ändern, sondern nur in den Beiträgen. Ich habe die anderen Beiträge im Forum überprüft, aber keiner davon funktioniert in der aktuellen Version von Discourse, daher frage ich hier nach.

Ich versuche dasselbe zu tun. Ich habe das Symbol für „Teilen

[ghgoodreau (Hunter)]

Gibt es eine Möglichkeit, ein FontAwesome-Icon global durch ein im Theme-Upload-Bereich hochgeladenes SVG-Icon zu ersetzen? Ich arbeite an einer Website und möchte das FontAwesome-Icon, das angezeigt wird, wenn ein Thema als gelöst markiert ist (unter Verwendung des discourse-solved-Plugins), durch das Logo meiner Site ersetzen. Mir fällt es schwer, dies direkt über den Plugin-Code anzugehen, und ich frage mich, ob die Header-Methode dafür geeignet ist.