تغيير الأيقونات عالميًا

[Discourse]

هذه طريقة سهلة لتغيير أيقونة Discourse على مستوى الموقع بالكامل.

1. انقر بزر الماوس الأيمن على الأيقونة التي تريد تغييرها واختر “Inspect element” أو “Inspect” (يعتمد ذلك على المتصفح)

2. ابحث عن اسم الأيقونة
   

   

3. ابحث عن أيقونة جديدة هنا Find Icons with the Perfect Look & Feel | Font Awesome على سبيل المثال external-link-alt

4. قم بتخصيص الكود وإضافته في علامة التبويب 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. يجب إضافة الأيقونات التي لا يستخدمها Discourse بشكل افتراضي في إعداد الموقع svg icon subset، ثم قم بإجبار تحديث المتصفح لرؤية التغييرات المطبقة.
   النتيجة:
   
   سيتم استبدال جميع أيقونات “link” بـ “external-link-tab”.
   إذا تم استخدام الأيقونة لعدة عناصر في صفحات أخرى، مثل الشارات، فستتم استبدالها هناك أيضاً.

---

الاستثناءات

لاحظ أن هناك بالفعل مكون موضوع يسمح لك بـ تغيير أيقونة الإعجاب. أستخدم هذا الحالة كمثال

أيقونة “heart”، المستخدمة للإعجاب، مضمنة برمجياً بأسماء أخرى ('d-liked' و 'd-unliked') ويجب التعامل معها بشكل مختلف عن الأيقونات الأخرى، لذا لتغيير أيقونة بأيقونة :

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

ولكن في صفحة الشارات لا تزال الأيقونة “heart”:

لذلك لتغييرها في تلك الصفحة نضيف:

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

مثال آخر:

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

يغير أيقونة المراقبة:

انظر هنا لاستثناءات أخرى تغطي حالة التتبع، التوسيع/الطي، الإشعارات والإعجابات بالطبع.

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

المصدر: discourse/icon-library.js at main · discourse/discourse (github.com)

---

لا تتردد في إنشاء مكونات مواضيع أخرى ومشاركتها في فئة Customization > Theme component الخاصة بنا!

---

هذا المستند يخضع للتحكم في الإصدارات - اقترح التغييرات على github.