Changer les icônes globalement

[Discourse]

Voici une méthode simple pour modifier un icône Discourse de manière globale.

1. Faites un clic droit sur l’icône que vous souhaitez modifier et sélectionnez « Inspecter l’élément » ou « Inspecter » (selon le navigateur)

2. Trouvez le nom de l’icône
   

   

3. Recherchez une nouvelle icône ici Find Icons with the Perfect Look & Feel | Font Awesome, par exemple external-link-alt

4. Personnalisez et ajoutez le code dans l’onglet 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. Les icônes qui ne sont pas utilisées par défaut dans Discourse doivent être ajoutées dans le paramètre du site svg icon subset, puis forcez un rafraîchissement de votre navigateur pour voir les modifications appliquées.
   Résultat :
   
   Toutes les icônes « link » seront remplacées par « external-link-tab ».
   Si une icône est utilisée pour plusieurs éléments sur d’autres pages, comme les badges, l’icône y sera également remplacée.

---

Exceptions

Remarque : il existe déjà un composant de thème qui permet de changer l’icône Like. J’utilise ce cas en exemple

L’icône « heart », utilisée pour donner un Like, est codée en dur avec d’autres noms ('d-liked' et 'd-unliked') et doit être traitée différemment des autres icônes. Ainsi, pour remplacer l’icône par l’icône :

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

mais sur la page des badges, l’icône est toujours « heart » :

donc, pour la modifier sur cette page, nous ajoutons :

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

Un autre exemple :

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

modifie l’icône de suivi :

Voir ici d'autres exceptions qui couvrent l'état de suivi, l'expansion/retrait, les notifications et bien sûr les likes.

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",
};

Réf. : discourse/icon-library.js at main · discourse/discourse (github.com)

---

N’hésitez pas à créer d’autres composants de thème et à les partager dans notre catégorie Customization > Theme component !

---

Ce document est sous contrôle de version - suggérez des modifications sur 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]

Est-il possible d’utiliser des icônes SVG personnalisées que nous ajoutons, plutôt que de se limiter aux icônes FA ?

[pmusaraj (Penar Musaraj)]

Oui, consultez Introducing Font Awesome 5 and SVG icons pour plus de détails.

[porterbayne]

Merci ! J’ai également trouvé Remplacer les icônes SVG par défaut de Discourse par des icônes personnalisées dans un thème

J’ai fini par intégrer directement le sprite SVG dans le fichier Header, car le téléchargement et le renommage comme indiqué dans cet article ne fonctionnaient pas pour moi (cela pourrait être une erreur de ma part, bien sûr).

Voici donc mon Header :

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

Et c’est facile à gérer.

J’utilise le générateur de sprite SVG disponible sur https://svgsprit.es pour m’assurer que le format est correct.

[bekircem]

Pouvons-nous utiliser les icônes Fabric de Microsoft avec cette méthode ?

[pmusaraj (Penar Musaraj)]

Vous devriez pouvoir le faire, oui. Je ne vois pas de distribution officielle de sprites SVG pour ces icônes, mais selon Where can I find the svg files of the icons? · Issue #1008 · OfficeDev/office-ui-fabric-core · GitHub, vous pouvez extraire les SVG vous-même, un par un, en utilisant leurs noms.

[tomwrench]

@thegurjyot

Votre message aide bien à changer les icônes globalement, mais comment modifier uniquement l’icône de partage dans les messages ? Je ne souhaite pas changer l’icône de lien dans l’éditeur, mais uniquement dans les messages. J’ai consulté les autres messages du forum, mais aucun ne fonctionne avec la version actuelle de Discourse, c’est pourquoi je pose la question ici.

J’essaie de faire la même chose. J’ai réussi à modifier l’icône « partager » dans les messages, mais elle modifie également l’icône « lien » dans l’éditeur. Avez-vous des idées pour modifier uniquement l’icône des messages ?

[ghgoodreau (Hunter)]

Existe-t-il un moyen de remplacer globalement une icône FontAwesome par une icône SVG téléchargée dans la section de téléchargement du thème ? Je travaille sur un site et j’aimerais modifier spécifiquement l’icône FontAwesome indiquant qu’un sujet est résolu (en utilisant le plugin discourse-solved) pour afficher le logo de mon site. J’ai du mal à aborder cela directement via le code du plugin et je me demandais si la méthode d’en-tête peut fonctionner pour ce genre de cas.