Modificare le icone globalmente

[Discourse]

Questo è un metodo semplice per modificare un’icona Discourse a livello globale.

1. Fare clic destro sull’icona che si desidera modificare e selezionare “Ispeziona elemento” o “Ispeziona” (dipende dal browser)

2. Trovare il nome dell’icona
   

   

3. Cercare una nuova icona qui Find Icons with the Perfect Look & Feel | Font Awesome, ad esempio external-link-alt

4. Personalizzare e aggiungere il codice nella scheda admin > customize > themes > edit code -> JS

// {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. Le icone che non sono utilizzate di default da Discourse devono essere aggiunte nell’impostazione del sito svg icon subset e quindi forzare l’aggiornamento del browser per vedere le modifiche applicate.
   Risultato:
   
   Tutte le icone “link” verranno sostituite da “external-link-tab”.
   Se un’icona è utilizzata per più elementi in altre pagine, come i badge, l’icona verrà sostituita anche lì.

---

Eccezioni

Note che esiste già un componente del tema che ti permette di cambiare l’icona Like. Sto usando questo caso come esempio

L’icona “heart”, utilizzata per dare Like, è hardcoded con altri nomi ('d-liked' e 'd-unliked') e dovrebbe essere trattata diversamente rispetto ad altre icone, quindi per cambiare l’icona con l’icona :

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

ma nella pagina dei badge l’icona è ancora “heart”:

quindi per cambiarla in quella pagina aggiungiamo:

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

Un altro esempio:

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

cambia l’icona di visualizzazione:

Vedi qui altre eccezioni che coprono lo stato di tracciamento, espandi/collassa, notifiche e like naturalmente.

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)

---

Sentitevi liberi di creare altri componenti del tema e condividerli nella nostra categoria Customization > Theme component!

---

Questo documento è sotto controllo versione - suggerisci modifiche su github.

[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]

È possibile utilizzare icone SVG personalizzate che aggiungiamo, invece di limitarsi alle icone FA?

[pmusaraj (Penar Musaraj)]

Sì, vedi Introducing Font Awesome 5 and SVG icons per i dettagli.

[porterbayne]

Grazie! Ho anche trovato Sostituire le icone SVG predefinite di Discourse con icone personalizzate in un tema

Alla fine ho incorporato direttamente lo sprite SVG nel file Header, poiché il caricamento e la denominazione come indicato nell’articolo non hanno funzionato per me (potrebbe essere un errore mio, ovviamente).

Quindi il mio Header è:

<svg width="0" height="0" class="hidden" style="display: none;">
    <symbol id="myicon-search" ..... </symbol>  
    <!-- tutti i miei simboli qui... -->
</svg>
<script type="text/discourse-plugin" version="0.8">
    api.replaceIcon('search', 'myicon-search'); 
</script>

Ed è facile da gestire.

Utilizzo il generatore di sprite SVG su https://svgsprit.es per assicurarmi che il formato sia corretto.

[bekircem]

Possiamo utilizzare le Microsoft Fabric Icons con questo metodo?

[pmusaraj (Penar Musaraj)]

Dovresti poterlo fare, sì. Non vedo una distribuzione ufficiale di sprite SVG di queste icone, ma secondo Where can I find the svg files of the icons? · Issue #1008 · OfficeDev/office-ui-fabric-core · GitHub puoi estrarre gli SVG da solo, uno per uno, utilizzando i loro nomi.

[tomwrench]

@thegurjyot

Il tuo post aiuta sicuramente a cambiare le icone a livello globale, ma come si fa a cambiare l’icona di condivisione solo nei post? Non voglio modificare l’icona del link nell’editor, ma solo nei post. Ho controllato gli altri post nel forum, ma nessuno di essi funziona nella versione attuale di Discourse, quindi chiedo qui.

Sto cercando di fare la stessa cosa. Sono riuscito a cambiare con successo l’icona “condividi” nei post, ma sembra che modifichi anche l’icona “link” nell’editor. Qualche idea su come cambiare solo l’icona nei post?

[ghgoodreau (Hunter)]

Esiste un modo per sostituire globalmente un’icona Font Awesome con un’immagine SVG caricata nella sezione di caricamento del tema? Sto lavorando a un sito e vorrei cambiare specificamente l’icona Font Awesome che indica quando un argomento è stato risolto (utilizzando il plugin discourse-solved) con il logo del mio sito. Sto avendo difficoltà ad approcciare la questione modificando direttamente il codice del plugin e mi chiedevo se il metodo dell’header possa funzionare per un caso del genere.