شارة جديدة، أيقونة الشارة لا تظهر في صفحة الشارات

لقد أنشأت شارة جديدة، ثم انتقلت إلى صفحة الشارات عبر قائمة الهامبرغر للتأكد من عرضها بشكل صحيح.

يظهر كل شيء كما هو متوقع حتى الآن، لكن أيقونة شارة مرجع برولغ مفيد مفقودة من الصورة.

راجعت شارات أخرى كمرجع، لكنني لم ألاحظ أي شيء أعتقد أنه غير صحيح.

تعلمت استخدام روابط HTML بدلاً من روابط Markdown.


الإعدادات الحالية:

الاسم: مرجع برولغ مفيد
الأيقونة: far-external-link-alt
الصورة:
نوع الشارة: برونزي
المجموعة: أخرى
الوصف: تمت إضافة رابط إلى مرجع برولغ مفيد
الوصف الطويل:
السماح باستخدام الشارة كبطاقة:
السماح بمنحها عدة مرات: مُفعّل
إظهار الشارة في صفحة الشارات العامة: مُفعّل
إظهار المنشور الذي مُنحت من خلاله الشارة في صفحة الشارة:
تفعيل الشارة: مُفعّل


Font Awesome: external-link-alt


قارنت أيضًا كود HTML

<div class="badge-contents">
  <div class="badge-icon badge-type-silver">
    <a href="/badges/103/great-contributor"><svg class="fa d-icon d-icon-certificate svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#certificate"></use></svg></a>
  </div>
  <div class="badge-info">
    <div class="badge-info-item">
      <h3><a href="/badges/103/great-contributor" class="badge-link">Great contributor</a></h3>
      <div class="badge-summary">contributed 25 accepted pull requests</div>
    </div>
  </div>
</div>
<div class="badge-contents">
  <div class="badge-icon badge-type-bronze">
    <a href="/badges/108/useful-prolog-reference"><svg class="fa d-icon d-icon-far-external-link-alt svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#far-external-link-alt"></use></svg></a>
  </div>
  <div class="badge-info">
    <div class="badge-info-item">
      <h3><a href="/badges/108/useful-prolog-reference" class="badge-link">Useful Prolog Reference</a></h3>
      <div class="badge-summary">Useful Prolog References</div>
    </div>
  </div>
</div>

لا يبدو أن هناك أي شيء خاطئ للوهلة الأولى.

هل لديك أي أفكار حول كيفية الإصلاح؟

Font Awesome 5 هو الصحيح:

fa-external-link-alt :check_mark:

ليس كذلك… ما لم تكن تريد تصميم أيقونة مختلف (صحح لي إذا كنت مخطئًا)
fas
far
fad
fal


المستخدم: fa external-link-alt

لا تغيير. الأيقونة لا تظهر.

سأحاول استخدام خط Awesome آخر لأرى ما سيحدث.

حسناً، بالتأكيد. أبلغونا بما يحدث

أستطيع رؤية البرونز.

استخدام: fa-certificate يعمل
تم نسخه من Contributor، لذا أنت على المسار الصحيح.

fa-external-link-alt يعمل بشكل صحيح.

far-external-link-alt كان خاطئًا.

رائع.


كيفية تحديد كود HTML الصحيح لاستخدامه في حقل Icon.

  1. انتقل إلى Font Awesome
  2. انقر على Icons
  3. ابحث عن الأيقونة.
  4. انقر على الأيقونة، على سبيل المثال external-link-alt
  5. مرر الماوس فوق كود HTML

image

لذلك في حالتي، كود HTML الصحيح هو fa-external-link-alt.

هذا تمامًا ما كنت أفكر فيه في الأصل :blush: يسعدني المساعدة!