Nouveau badge : l'icône du badge n'apparaît pas sur la page des badges

Soutien
1

J’ai créé un nouveau badge, puis je suis allé à la page des badges via le menu hamburger pour m’assurer qu’il s’affichait correctement.

Tout s’affiche comme prévu jusqu’à présent, mais l’icône du badge Useful Prolog Reference manque sur l’image.

image
image1162×346 5.51 KB

J’ai examiné d’autres badges à titre d’exemple, mais je ne vois rien qui me semble incorrect.

J’ai appris à utiliser des ancres HTML au lieu de liens Markdown.

Paramètres actuels :

Nom : Useful Prolog Reference
Icône : far-external-link-alt
Image :
Type de badge : Bronze
Groupe : Autres
Description : Lien ajouté à Useful Prolog References
Longue description :
Autoriser l’utilisation du badge comme tuile :
Peut être accordé plusieurs fois : Coché
Afficher le badge sur la page publique des badges : Coché
Afficher le post accordant le badge sur la page du badge :
Activer le badge : Coché

Font Awesome : external-link-alt

image
image443×827 6.37 KB

J’ai également comparé le 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>

Rien ne semble incorrect au premier coup d’œil.

Avez-vous des idées pour résoudre ce problème ?

2

C’est bien Font Awesome 5 :

fa-external-link-alt :check_mark:

Pas… Sauf si vous voulez le design d’icône différent (corrigez-moi si je me trompe)
fas
far
fad
fal

3

utilisé : fa external-link-alt

Aucun changement. L’icône n’apparaît pas.

Je vais essayer une autre police Awesome pour voir ce qui se passe.

4

D’accord, pas de problème. Tenez-nous au courant de ce qui se passe.

5

Je vois le bronze.

Screenshot_20190908-212758
Screenshot_20190908-2127581080×1920 131 KB

6

En utilisant : fa-certificate fonctionne
Cela a été copié depuis Contributor, vous êtes donc sur la bonne voie.

image
image1052×320 5.1 KB

7

fa-external-link-alt fonctionne.

far-external-link-alt était incorrect.

image
image1046×333 5.63 KB

Super.

Comment identifier le bon code HTML à utiliser pour le champ Icon.

  1. Allez sur Font Awesome
  2. Cliquez sur Icons
  3. Trouvez l’icône.
  4. Cliquez sur l’icône, par exemple external-link-alt
  5. Passez la souris sur le code HTML

image

Donc dans mon cas, le bon HTML est fa-external-link-alt.

8

Exactement ce que je pensais au départ :blush: ravi d’avoir pu aider !