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

[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”.
   إذا كانت الأيقونة تُستخدم لعناصر متعددة في صفحات أخرى، مثل الشارات (badges)، فسيتم استبدالها هناك أيضًا.

---

الاستثناءات

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

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

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

ولكن في صفحة الشارات (badge)، لا تزال الأيقونة “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)

---

لا تتردد في إنشاء مكونات سمات أخرى ومشاركتها في فئة #theme-component الخاصة بنا!

---

هذا الملف خاضع للتحكم في الإصدارات - اقترح التغييرات على 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]

هل من الممكن استخدام أيقونات SVG مخصصة نضيفها نحن، بدلاً من أيقونات FA فقط؟

[pmusaraj (Penar Musaraj)]

نعم، راجع Introducing Font Awesome 5 and SVG icons للحصول على التفاصيل.

[porterbayne]

شكرًا لك! لقد وجدت أيضًا استبدال أيقونات SVG الافتراضية في Discourse بأيقونات مخصصة في سمة معينة

لقد قمت في النهاية بتضمين رمز SVG مباشرةً في ملف الرأس، حيث لم ينجح رفعه وتسميته بالطريقة المذكورة في تلك المقالة بالنسبة لي (قد يكون ذلك خطأً مني، بالطبع).

إذن ملف الرأس الخاص بي هو:

<svg width="0" height="0" class="hidden" style="display: none;">      <symbol id="myicon-search" ..... </symbol>      <!-- جميع الرموز الخاصة بي هنا... -->
</svg>
<script type="text/discourse-plugin" version="0.8">        api.replaceIcon('search', 'myicon-search'); 
</script>

وهذا سهل الإدارة.

أستخدم مولد رموز SVG في https://svgsprit.es للتأكد من صحة التنسيق.

[bekircem]

هل يمكننا استخدام أيقونات Fabric الخاصة بشركة مايكروسوفت مع هذه الطريقة؟

[pmusaraj (Penar Musaraj)]

نعم، يجب أن تكون قادرًا على ذلك. لا أرى توزيعًا رسميًا لرموز SVG، ولكن وفقًا لـ https://github.com/OfficeDev/office-ui-fabric-core/issues/1008، يمكنك استخراج ملفات SVG بنفسك، واحدًا تلو الآخر، باستخدام أسماءها.

[tomwrench]

@thegurjyot

مساهمتك تساعد بالفعل في تغيير الأيقونات على مستوى الموقع، ولكن كيف يمكن تغيير أيقونة “مشاركة” في المنشورات فقط؟ لا أريد تغيير أيقونة “الرابط” في المحرر، بل فقط في المنشورات. لقد تفحصت المنشورات الأخرى في المنتدى، لكن لا شيء منها يعمل في إصدار Discourse الحالي، لذا أطرح سؤالي هنا.

أنا أحاول فعل الشيء نفسه. لقد تمكنت بنجاح من تغيير أيقونة “مشاركة” في المنشورات، لكن يبدو أن هذا يغير أيضًا أيقونة “الرابط” في المحرر. هل لديكم أي أفكار حول كيفية تغيير أيقونة المنشورات فقط؟

[ghgoodreau (Hunter)]

هل توجد طريقة لتغيير أيقونة FontAwesome إلى أيقونة SVG تم رفعها في قسم رفع السمات بشكل عام؟ أنا أعمل على موقع وأود تغيير أيقونة FontAwesome المحددة لحالة حل الموضوع (باستخدام إضافة discourse-solved) إلى شعار موقعي. أواجه صعوبة في التعامل مع هذا عبر كود الإضافة الفعلي، وأتساءل عما إذا كانت طريقة الرأس هذه تعمل لمثل هذا الغرض.