新バッジのアイコンがバッジページに表示されない

新しいバッジを作成し、それが正しく表示されるか確認するためにハンバーガーメニューからバッジページへ移動しました。

現時点ではすべて期待通りに表示されていますが、画像から Useful Prolog Reference バッジのアイコンが欠落しています。

他のバッジを例として確認しましたが、間違いと思われる点は見つかりませんでした。

HTML アンカーを Markdown リンク代わりに使う方法を学びました。


現在の設定:

名前: Useful Prolog Reference
アイコン: far-external-link-alt
画像:
バッジタイプ: ブロンズ
グループ: その他
説明: Useful Prolog References にリンクが追加されました
長い説明:
タイルとして使用可能:
複数回付与可能: チェックあり
公開バッジページにバッジを表示: チェックあり
バッジ付与時の投稿をバッジページに表示:
バッジを有効化: チェックあり


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 Font を試して結果を確認します。

OK、わかりました。結果を教えてくださいね。

ブロンズが見えます。

fa-certificate を使用すると機能します
これは Contributor からコピーされたもので、正しい方向に進んでいます。

fa-external-link-alt は機能します。

far-external-link-alt は誤りでした。

素晴らしいです。


Icon フィールドに使用する正しい HTML の特定方法。

  1. Font Awesome にアクセス
  2. Icons をクリック
  3. アイコンを検索
  4. アイコンをクリック(例:external-link-alt
  5. HTML 上にマウスを合わせる

image

私の場合、正しい HTML は fa-external-link-alt です。

まさに私が最初から思っていた通りです😊 お役に立てて嬉しいです!