Nuovo badge: l'icona del badge non viene visualizzata nella pagina dei badge

Supporto
1

Ho creato un nuovo badge, poi sono andato alla pagina dei badge tramite il menu a hamburger per assicurarmi che venisse visualizzato correttamente.

Finora tutto si visualizza come previsto, ma l’icona del badge “Useful Prolog Reference” manca nell’immagine.

image
image1162×346 5.51 KB

Ho esaminato altri badge come esempio, ma non vedo nulla che ritenga errato.

Ho imparato a utilizzare gli anchor HTML invece dei link Markdown.

Impostazioni attuali:

Nome: Useful Prolog Reference
Icona: far-external-link-alt
Immagine:
Tipo di badge: Bronzo
Gruppo: Altro
Descrizione: Link aggiunto a Useful Prolog References
Descrizione estesa:
Consenti di usare il badge come tessera:
Può essere assegnato più volte: Spuntato
Mostra il badge nella pagina pubblica dei badge: Spuntato
Mostra il post che assegna il badge nella pagina del badge:
Abilita il badge: Spuntato

Font Awesome: external-link-alt

image
image443×827 6.37 KB

Ho anche confrontato l’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>

A prima vista non sembra esserci nulla di sbagliato.

Avete qualche idea su come risolvere?

2

È Font Awesome 5:

fa-external-link-alt :check_mark:

Non… a meno che tu non voglia un design dell’icona diverso (correggimi se sbaglio)
fas
far
fad
fal

3

usato: fa external-link-alt

Nessun cambiamento. L’icona non appare.

Proverò un altro Font Awesome per vedere cosa succede.

4

Va bene, certo. Fammi sapere come va.

5

Posso vedere il bronzo.

Screenshot_20190908-212758
Screenshot_20190908-2127581080×1920 131 KB

6

Usare: fa-certificate funziona
È stato copiato da Contributor, quindi sei sulla strada giusta.

image
image1052×320 5.1 KB

7

fa-external-link-alt funziona.

far-external-link-alt era errato.

image
image1046×333 5.63 KB

Fantastico.

Come identificare il corretto HTML da usare per il campo Icon.

  1. Vai su Font Awesome
  2. Clicca su Icons
  3. Trova l’icona.
  4. Clicca sull’icona, ad esempio external-link-alt
  5. Passa il mouse sull’HTML

image

Quindi nel mio caso, l’HTML corretto è fa-external-link-alt.

8

Proprio quello che pensavo all’inizio :blush: felice di aver aiutato!