New badge, badge icon not showing on badges page

[EricGT]

I made a new badge, then went to the badges page via the hamburger to ensure it displayed correctly.

Everything displays as expected so far, but Useful Prolog Reference badge incon is missing from the image.

I looked at other badges as an example but see nothing that I believe to be incorrect.

Did learn to use HTML anchors instead of Markdown links.

---

Current settings:

Name: Useful Prolog Reference
Icon:far-external-link-alt
Image:
Badge Type: Bronze
Group: Other
Description: Link added to Useful Prolog References
Long Description:
Allow badge to be used as a tile:
Can be granted multiple times: Checked
Show badge on the public badges page: Checked
Show post granting badge on badge page:
Enable badge: Checked

---

Font Awesome: external-link-alt

---

Also compared the 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>

Nothing at first glance looks wrong.

Any ideas on how to fix?

[ondrej]

Font awesome 5 it is:

fa-external-link-alt

Not… Unless you want the different icon design (correct me if I’m wrong)
fas
far
fad
fal

[EricGT]

@ondrej

Font awesome 5 it is:
fa external-link-alt

Not:
fas
far

---

used: fa external-link-alt

No change. Icon not appearing.

I will try another Awesome Font to see what happens.

[ondrej]

OK, sure thing. Let us know what happens

[ondrej]

I can see the bronze.

[EricGT]

Using: fa-certificate works
It was copied from Contributor so you are on the right path.

[EricGT]

fa-external-link-alt works.

far-external-link-alt was wrong.

Awesome.

---

How to identify correct HTML to use for Icon field.

1. Go to Font Awesome
2. Click Icons
3. Find Icon.
4. Click on Icon, e.g. external-link-alt
5. Mouse over HTML

So in my case, the correct HMTL is fa-external-link-alt.

[ondrej]

@EricGT

far-external-link-alt was wrong

Just what I originally thought happy to help!