Bonjour à tous,
Je souhaite modifier ces icônes
Je l’ai fait comme ceci
Et je l’ai écrit dans l’en-tête
Mais l’icône n’a pas changé
Cela fonctionne avec d’autres icônes
Veuillez m’aider à résoudre ce problème
Don
Août 11, 2021, 1:36
2
Bonjour Mikhail,
Veuillez essayer ceci
<script type="text/discourse-plugin" version="0.8">
api.replaceIcon('notification.granted_badge', 'oo-medal-badges');
</script>
Vous pouvez trouver ces remplacements ici
import { h } from "virtual-dom";
import { isDevelopment } from "discourse-common/config/environment";
import escape from "discourse-common/lib/escape";
const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
let _renderers = [];
let warnMissingIcons = true;
let _iconList;
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",
"notification.mentioned": "at",
Oui, ça a fonctionné. Merci beaucoup
Et où puis-je voir à quoi ils ressemblent ?
Don:
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",
"notification.mentioned": "at",
Don
Août 11, 2021, 2:35
5
Vous pouvez facilement l’identifier en utilisant l’inspecteur d’éléments.
Par exemple : la notification avec l’icône certificate .
Trouvez le nom de l’icône en utilisant l’inspecteur d’éléments
Trouvez la même icône dans le fichier icon-library.js
"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",
};
Ensuite, vous pouvez remplacer l’icône par n’importe quelle autre icône de votre choix.
Merci pour votre réponse. J’ai trouvé la solution. Je pensais qu’il existait une liste d’icônes standard Discourse.
Puis-je ajouter ceci pour référence future. J’ai suivi les instructions sur Replace Discourse's default SVG icons with custom icons in a theme - #19 mais ce que je n’avais pas réalisé au début, c’est que la même icône peut être référencée de différentes manières. Dans l’application elle-même, sous « /styleguide/atoms/icons », se trouve une liste de toutes les icônes et de la manière dont elles sont référencées, donc dans mon fichier header.html, j’ai maintenant 5 références à l’icône enveloppe :
api.replaceIcon('envelope', 'fgx-air-mail');
api.replaceIcon('far-envelope', 'fgx-air-mail');
api.replaceIcon('notification.private_message', 'fgx-air-mail');
api.replaceIcon('notification.read_private_message', 'fgx-air-mail');
api.replaceIcon('notification.invited_to_private_message', 'fgx-air-mail');