Novo emblema: ícone não exibido na página de emblemas

Suporte
1

Criei um novo emblema e, em seguida, acessei a página de emblemas através do menu hambúrguer para garantir que fosse exibido corretamente.

Tudo está sendo exibido conforme o esperado até agora, mas o ícone do emblema Useful Prolog Reference está faltando na imagem.

image
image1162×346 5.51 KB

Olhei outros emblemas como exemplo, mas não vejo nada que eu acredite estar incorreto.

Aprendi a usar âncoras HTML em vez de links Markdown.

Configurações atuais:

Nome: Useful Prolog Reference
Ícone: far-external-link-alt
Imagem:
Tipo de Emblema: Bronze
Grupo: Outros
Descrição: Link adicionado a Useful Prolog References
Descrição longa:
Permitir que o emblema seja usado como um bloco:
Pode ser concedido várias vezes: Marcado
Mostrar o emblema na página pública de emblemas: Marcado
Mostrar a postagem que concedeu o emblema na página do emblema:
Habilitar emblema: Marcado

Font Awesome: external-link-alt

image
image443×827 6.37 KB

Também comparei o 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>

À primeira vista, nada parece errado.

Alguma ideia de como corrigir?

2

É o Font Awesome 5:

fa-external-link-alt :check_mark:

Não… A menos que você queira o design de ícone diferente (corrija-me se eu estiver errado)
fas
far
fad
fal

3

usado: fa external-link-alt

Sem alteração. O ícone não está aparecendo.

Vou tentar outra fonte Awesome para ver o que acontece.

4

Ok, combinado. Nos avise o que acontece

5

Eu consigo ver o bronze.

Screenshot_20190908-212758
Screenshot_20190908-2127581080×1920 131 KB

6

Usando: fa-certificate funciona
Foi copiado de Contributor, então você está no caminho certo.

image
image1052×320 5.1 KB

7

fa-external-link-alt funciona.

far-external-link-alt estava errado.

image
image1046×333 5.63 KB

Incrível.

Como identificar o HTML correto para usar no campo Icon.

  1. Acesse Font Awesome
  2. Clique em Ícones
  3. Encontre o ícone.
  4. Clique no ícone, por exemplo, external-link-alt
  5. Passe o mouse sobre o HTML

image

Então, no meu caso, o HTML correto é fa-external-link-alt.

8

Exatamente o que eu pensei originalmente :blush: feliz em ajudar!