Hi, everybody
I want to change these icons
I did it like this
And I wrote it in the Header
But the icon has not changed
It works with other icons
Please help me solve this problem
إعجابَين (2)
Don
11 أغسطس 2021، 1:36م
2
Hi Mikhail,
Please try this one
<script type="text/discourse-plugin" version="0.8">
api.replaceIcon('notification.granted_badge', 'oo-medal-badges');
</script>
You can find these replacements here
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",
4 إعجابات
Yes, it worked. Thank you very much
إعجاب واحد (1)
And where can I see what they look like?
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
11 أغسطس 2021، 2:35م
5
You can easily identify it by using inspect elements.
For example.: the certificate icon notification
Find the icon name with inspect elements
Find the same icon in the 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",
};
Then you can replace the icon with any other icon you want.
إعجاب واحد (1)
Thanks for your reply
I figured it out. I thought there was some sort of list with standard Discourse icons
إعجاب واحد (1)
هل يمكنني إضافة هذا كمرجع مستقبلي. لقد اتبعت التعليمات الموجودة على Replace Discourse's default SVG icons with custom icons in a theme - #19 ولكن ما لم أدركه في البداية هو أن نفس الأيقونة يمكن الإشارة إليها بطرق مختلفة. في التطبيق نفسه، ضمن ‘/styleguide/atoms/icons’ توجد قائمة بجميع الأيقونات وكيفية الإشارة إليها، لذلك في ملف header.html الخاص بي لدي الآن 5 إشارات إلى أيقونة الظرف:
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');
إعجابَين (2)