Nuevo insignia: el icono no se muestra en la página de insignias

Soporte
1

He creado una nueva insignia y luego fui a la página de insignias a través del menú hamburguesa para asegurarme de que se mostrara correctamente.

Todo se muestra como se esperaba hasta ahora, pero el icono de la insignia Referencia Útil de Prolog falta en la imagen.

image
image1162×346 5.51 KB

He revisado otras insignias como ejemplo, pero no veo nada que considere incorrecto.

He aprendido a usar anclas HTML en lugar de enlaces Markdown.

Configuración actual:

Nombre: Referencia Útil de Prolog
Icono: far-external-link-alt
Imagen:
Tipo de insignia: Bronce
Grupo: Otros
Descripción: Enlace añadido a Referencias Útiles de Prolog
Descripción larga:
Permitir que la insignia se use como un mosaico:
Se puede otorgar varias veces: Marcado
Mostrar la insignia en la página pública de insignias: Marcado
Mostrar la publicación que otorga la insignia en la página de la insignia:
Habilitar insignia: Marcado

Font Awesome: external-link-alt

image
image443×827 6.37 KB

También he comparado el 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">Gran contribuyente</a></h3>
      <div class="badge-summary">ha contribuido con 25 solicitudes de extracción aceptadas</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">Referencia Útil de Prolog</a></h3>
      <div class="badge-summary">Referencias Útiles de Prolog</div>
    </div>
  </div>
</div>

A primera vista, nada parece incorrecto.

¿Alguna idea sobre cómo solucionarlo?

2

Font Awesome 5 es:

fa-external-link-alt :check_mark:

No… A menos que quieras el diseño de icono diferente (corrígeme si me equivoco)
fas
far
fad
fal

3

Usado: fa external-link-alt

Sin cambios. El icono no aparece.

Probaré otra fuente de Awesome para ver qué sucede.

4

Vale, por supuesto. Avísanos qué pasa

5

Puedo ver el bronce.

Screenshot_20190908-212758
Screenshot_20190908-2127581080×1920 131 KB

6

Usar: fa-certificate funciona
Se copió de Contributor, así que vas por buen camino.

image
image1052×320 5.1 KB

7

fa-external-link-alt funciona.

far-external-link-alt era incorrecto.

image
image1046×333 5.63 KB

Genial.

Cómo identificar el HTML correcto para usar en el campo Icon.

  1. Ve a Font Awesome
  2. Haz clic en Icons
  3. Busca el icono.
  4. Haz clic en el icono, por ejemplo, external-link-alt
  5. Pasa el ratón sobre el HTML

image

Así que en mi caso, el HTML correcto es fa-external-link-alt.

8

Exactamente lo que pensé originalmente :blush: ¡encantado de ayudar!