Новый бейдж: иконка бейджа не отображается на странице бейджей

Поддержка
1

Я создал новый значок, затем перешёл на страницу значков через меню-гамбургер, чтобы убедиться, что он отображается корректно.

Пока всё отображается как ожидалось, но иконка значка «Useful Prolog Reference» отсутствует на изображении.

image
image1162×346 5.51 KB

Я посмотрел на другие значки в качестве примера, но не нашёл ничего, что, по моему мнению, было бы неверным.

Научился использовать HTML-якоря вместо Markdown-ссылок.

Текущие настройки:

Название: Useful Prolog Reference
Иконка: far-external-link-alt
Изображение:
Тип значка: Бронзовый
Группа: Другое
Описание: Ссылка добавлена к Useful Prolog References
Длинное описание:
Разрешить использование значка в качестве плитки:
Может быть выдан несколько раз: Отмечено
Показывать значок на публичной странице значков: Отмечено
Показывать пост, выдавший значок, на странице значка:
Включить значок: Отмечено

Font Awesome: external-link-alt

image
image443×827 6.37 KB

Также сравнил 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>

На первый взгляд ничего не выглядит неправильно.

Есть ли какие-либо идеи, как это исправить?

2

Итак, Font Awesome 5:

fa-external-link-alt :check_mark:

Не… Если только вы не хотите другой дизайн иконки (поправьте меня, если я ошибаюсь)
fas
far
fad
fal

3

использовано: fa external-link-alt

Никаких изменений. Иконка не отображается.

Я попробую другой шрифт Awesome, чтобы посмотреть, что произойдёт.

4

Хорошо, без проблем. Дайте знать, что получится.

5

Я вижу бронзу.

Screenshot_20190908-212758
Screenshot_20190908-2127581080×1920 131 KB

6

Использование: fa-certificate работает
Это было скопировано из Contributor, так что вы на правильном пути.

image
image1052×320 5.1 KB

7

fa-external-link-alt работает.

far-external-link-alt было неверно.

image
image1046×333 5.63 KB

Отлично.

Как определить правильный HTML для поля Icon.

  1. Перейдите на Font Awesome
  2. Нажмите Icons
  3. Найдите иконку.
  4. Нажмите на иконку, например external-link-alt
  5. Наведите курсор на HTML

image

Таким образом, в моём случае правильный HTML — fa-external-link-alt.

8

Именно так я и думал изначально :blush: Рад помочь!