نقوم بترقية أيقوناتنا إلى Font Awesome 6!

إعلانات
1

ما هو Font Awesome؟

يستخدم Discourse مجموعة مجانية من الأيقونات من Font Awesome في جميع أنحاء واجهته. تراها في أشرطة الأدوات، والشارات، والأزرار، وما إلى ذلك… إليك شريط أدوات المؤلف الخاص بنا:

image

منذ عام 2018، كنا نستخدم Font Awesome 5 (الإعلان الأصلي)، وفي غضون ذلك تم إصدار Font Awesome 6. يتضمن الإصدار 6 أيقونات جديدة، وبعض التحديثات العامة للأسلوب، وإعادة تسمية.

اعتبارًا من اليوم، سيبدأ Discourse في استخدام الإصدار 6 أيضًا! على وجه التحديد، الإصدار 6.6.0. هذا ليس تغييرًا بصريًا ضخمًا، ولكنك ستلاحظ بعض الاختلافات:

image

ماذا يتضمن هذا الترقية؟

تتضمن هذه الترقية عددًا من إعادة التسمية لجعل الأمور أكثر اتساقًا.

لدعم مجتمعات Discourse خلال الترقية، سيتم طرح التغييرات على مراحل متعددة:

:white_check_mark: اليوم - تم ترقية Font Awesome إلى الإصدار 6، وسيتم إعادة تعيين الأيقونات تلقائيًا

:white_check_mark: قريبًا - سيتم تمكين رسائل الإهمال لمساعدة مؤلفي السمات/الإضافات على تحديث أسماء أيقوناتهم

:white_check_mark: الربع الأول 2025 - سيتم تمكين لافتة تحذير للمسؤول عن أي إهمالات متبقية

:white_check_mark: 1 أبريل 2025 - إزالة إعادة التعيين التلقائي ولافتة تحذير المسؤول

:white_check_mark: 2 مايو 2025 - إزالة تعيين أسماء الأيقونات القديمة وتسجيل الأخطاء على مستوى الخطأ

أرى أيقونة مفقودة، كيف يمكنني إصلاح ذلك؟

  1. افتح أدوات مطوري المتصفح، وابحث عن العنصر ذي الصلة الذي يحتوي على الأيقونة المفقودة.

  2. لاحظ الاسم الحالي للأيقونة المتأثرة، وابحث عن اسم الأيقونة الصحيح لتحديثها إليه. يمكن الرجوع إلى تعيين أسماء الأيقونات على discourse/lib/deprecated_icon_handler.rb at fbc2cfb6185c00950da8e915b1a32546e7020913 · discourse/discourse · GitHub.

  3. قم بتحديث السمة/الإضافة ذات الصلة التي ينتمي إليها العنصر، أو قم بإخطار المطور الخاص بها لإجراء التحديث.

إذا كنت بحاجة إلى مساعدة في هذا الأمر، فلا تتردد في إنشاء موضوع #support، أو الاتصال بمزود الاستضافة الخاص بك بالطريقة المعتادة.

ماذا يحتاج مؤلفو السمات والإضافات إلى معرفته؟

ستظل الطرق الموضحة في Introducing Font Awesome 5 and SVG icons تعمل لإضافة أيقونات جديدة ومخصصة.

لقد قمنا منذ ذلك الحين بإزالة إعادة تعيين الأسماء القديمة، وإذا كانت السمة/الإضافة الخاصة بك لا تزال تستخدم الأسماء القديمة، فسترى مسافات فارغة حيث كانت بعض أيقوناتك في السابق.

هناك الكثير من الأيقونات الجديدة!

تُقدم الترقية من الإصدار 5 إلى 6 مئات من الأيقونات المجانية الجديدة، ما يقرب من 500 في المجموع!

يمكنك تصفح المجموعة الكاملة هنا، وهذا مرتب لعرض أحدث الإضافات أولاً — والبحث مفيد جدًا: Search Icons & Find the Perfect Design | Font Awesome

39 إعجابًا
2

هل هذا مطلوب بعد الآن:

@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");

وهل يجب تعديل هذا:

<script type="text/discourse-plugin" version="0.8">
    api.replaceIcon('d-post-share', 'share-alt');
    api.replaceIcon('d-topic-share', 'share-alt');
    api.replaceIcon("far-beer", "beer");
</script>
إعجابَين (2)
3

هذا رائع! يمكنني أخيرًا استخدام الأيقونة التي أريدها للفئة :tada:

6 إعجابات
4

يبدو أن هذا قد يكون متعلقًا بـ Making tags look like real world tags - #11 by HeyRR… إذا كنت تستخدم CSS مثل content: "\\f02b"; فعليك أن تظل بحاجة إلى هذا. هذا يستخدم خط الأيقونات بشكل منفصل عن تطبيقنا (الذي يستخدم ملفات SVG مباشرة)

لا يحتاج هذا إلى تعديل فوري، ولكن بناءً على قائمة إعادة التسمية يجب عليك استبدال share-alt بـ share-nodes و beer بـ beer-mug-empty في وقت ما خلال الأشهر الستة القادمة (كوب البيرة المملوء هو أيقونة احترافية… أعتقد أنها ليست " مجانية مثل البيرة")

6 إعجابات
5

ربما. كان شيئًا تم اقتراحه أكثر من مرة قبل بضع سنوات. لم أفهم حقًا لماذا، لكن يمكنني النسخ واللصق :squinting_face_with_tongue: لكن له علاقة بالقدرة على استخدام Font Awesome في مكان ما، في أي مكان أو شيء من هذا القبيل.

ولكن إذا لم أعد أستطيع استخدام البيرة فسأبدأ تمردًا بجيش من المومين :rofl:

3 إعجابات
6

في الوقت الحالي، تفتقد أيقونات الدرع هنا في ميتا.

Screenshot_20240909_162435_Chrome
Screenshot_20240909_162435_Chrome1299×247 59.7 KB

Screenshot_20240909_162555_Chrome
Screenshot_20240909_162555_Chrome1126×499 137 KB

6 إعجابات
7

تم الإصلاح :tada:

Screenshot_20240909_172213_Chrome
Screenshot_20240909_172213_Chrome1274×248 58.9 KB

Screenshot_20240909_172234_Chrome
Screenshot_20240909_172234_Chrome1123×513 135 KB

7 إعجابات
8

شكراً، ليس من الواضح لي ما إذا كان الترقية إلى الإصدار 6 قد تم إجراؤها أم سيتم إجراؤها؟ (لم أتمكن من العثور على أيقونة “bluesky” :butterfly: الإصدار 6 بعد ترقية موقعي، لهذا السبب أسأل…)

إعجاب واحد (1)
9

بمجرد تحديث موقعك، ستكون أيقوناتك FA6 وسيتم إعادة تعيينها تلقائيًا بواسطة Discourse.

إعجابَين (2)
10

نعم، هذا ما توقعته، ولكن هذا الرمز لا يمكن عرضه (أستخدمه في مكون روابط أيقونات الرأس)

إعجاب واحد (1)
11

لقد وجدت الأيقونة في الإصدار 6.6.0

نظرًا لأنها ليست أيقونة مستخدمة في Discourse، فهل هي ضمن svg icon subset الخاص بك في إعدادات الموقع؟

إعجاب واحد (1)
12

لا، أنا أضيفه بهذه الصيغة: “fa-bluesky” في موارد المكون، لكن هذا غير كافٍ. سألقي نظرة على مسألة موارد SVG هذه، لست على دراية بها.

(تحديث)، يبدو أننا نتحدث عن نفس الشيء، نعم لقد تمت إضافته في الموارد…

صورة
صورة1037×265 18.1 KB

إعجاب واحد (1)
13

قد تحتاج إلى استخدام fab-bluesky، لأنها جزء من مجموعة العلامة التجارية

5 إعجابات
15

شكراً، لقد نجح الأمر بتحديد fab-bluesky في موارد SVG وفي محرر روابط الرأس المخصصة، وهو ما لم أكن بحاجة لفعله من قبل. في مكون روابط الرأس المخصصة، لم أحدد البادئة “fa” مطلقًا، ولكن بالنسبة لأيقونة bluesky، احتجت إلى تحديد “fab-bluesky”. الشيء الرئيسي هو أنه يعمل! شكراً.

إعجابَين (2)
16

لقد قمت بالترقية وتغيرت الأيقونات. الشيء الذي كان يزعجني أكثر، لأنني أخاف قليلاً من مستخدمي، (هؤلاء السيدات رائعات، ولكن إذا انزعجن…) هو ما يحدث مع ردود الفعل، ولكن هذا عالم مختلف، أليس كذلك؟ على أي حال، كل شيء سار بسلاسة.

4 إعجابات
17

تبدو ترقية رائعة! أحب التقريب المحدث. لم أكن أعرف أنه تغيير أردته.

إعجابَين (2)
18

الأهم من ذلك، تستخدم النسخة الجديدة شعار Fedora الصحيح بدلاً من تقريب غير مصرح به كان يسبب صداعاً لمصممينا.

11 إعجابًا
19

تم تقسيم 9 مشاركات إلى موضوع جديد: بعض الأيقونات لا تظهر بعد الترقية

24

هل سيتم تحديث مكونات السمات الخاصة بأيقونات الفئات وأيقونات العلامات الرسمية لاستخدام أسماء Font Awesome 6 الجديدة؟

أعتقد أنها لا تزال تستخدم FA5 حاليًا

3 إعجابات
25

تستخدم مكونات السمة هذه نظام الأيقونات المدمج في Discourse، لذلك لا أعتقد أنها ستحتاج إلى تحديث لتكون متوافقة - يجب أن تستخدم الأيقونات الجديدة تلقائيًا.

7 إعجابات