# New badge, badge icon not showing on badges page

**URL:** <https://meta.discourse.org/t/new-badge-badge-icon-not-showing-on-badges-page/127978>\
**Category:** Support\
**Created:** [September 8, 2019, 7:55pm UTC](https://meta.discourse.org/t/new-badge-badge-icon-not-showing-on-badges-page/127978 "2019-09-08T19:55:07Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![EricGT](https://avatars.discourse-cdn.com/v4/letter/e/f1d935/32.png) [@EricGT](https://meta.discourse.org/u/EricGT)\
**Post date:** [September 8, 2019, 7:55pm UTC](https://meta.discourse.org/t/new-badge-badge-icon-not-showing-on-badges-page/127978/1 "2019-09-08T19:55:07Z")

</div>

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.

 ![image](https://global.discourse-cdn.com/meta/original/3X/d/3/d351e38617792f1ef92ec843467ee03531ab1a02.png)

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](https://swi-prolog.discourse.group/t/useful-prolog-references/1089/)  
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](https://fontawesome.com/icons/external-link-alt?style=solid)

 ![image](https://global.discourse-cdn.com/meta/original/3X/5/9/59d201346062c07ef5fe53c3fc17fcd37d3755ba.png)

* * *

Also compared the HTML

```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>

```

```HTML
<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?

---

<div class="post-metadata">

**Author:** ![ondrej](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ondrej/32/198804_2.png) [@ondrej](https://meta.discourse.org/u/ondrej)\
**Post date:** [September 8, 2019, 8:19pm UTC](https://meta.discourse.org/t/new-badge-badge-icon-not-showing-on-badges-page/127978/2 "2019-09-08T20:19:38Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![EricGT](https://avatars.discourse-cdn.com/v4/letter/e/f1d935/32.png) [@EricGT](https://meta.discourse.org/u/EricGT)\
**Post date:** [September 8, 2019, 8:26pm UTC](https://meta.discourse.org/t/new-badge-badge-icon-not-showing-on-badges-page/127978/3 "2019-09-08T20:26:16Z")

</div>

> [@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.

---

<div class="post-metadata">

**Author:** ![ondrej](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ondrej/32/198804_2.png) [@ondrej](https://meta.discourse.org/u/ondrej)\
**Post date:** [September 8, 2019, 8:26pm UTC](https://meta.discourse.org/t/new-badge-badge-icon-not-showing-on-badges-page/127978/4 "2019-09-08T20:26:47Z")

</div>

OK, sure thing. Let us know what happens

---

<div class="post-metadata">

**Author:** ![ondrej](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ondrej/32/198804_2.png) [@ondrej](https://meta.discourse.org/u/ondrej)\
**Post date:** [September 8, 2019, 8:28pm UTC](https://meta.discourse.org/t/new-badge-badge-icon-not-showing-on-badges-page/127978/5 "2019-09-08T20:28:41Z")

</div>

I can see the bronze.

 ![Screenshot_20190908-212758](https://global.discourse-cdn.com/meta/original/3X/3/6/36bf60dcecdbbf7bb4b31caf7321624eb7f74cd9.png)

---

<div class="post-metadata">

**Author:** ![EricGT](https://avatars.discourse-cdn.com/v4/letter/e/f1d935/32.png) [@EricGT](https://meta.discourse.org/u/EricGT)\
**Post date:** [September 8, 2019, 8:28pm UTC](https://meta.discourse.org/t/new-badge-badge-icon-not-showing-on-badges-page/127978/6 "2019-09-08T20:28:58Z")

</div>

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

 ![image](https://global.discourse-cdn.com/meta/original/3X/c/4/c4f8dba8f80b4896440ede39de4c4a730a88c677.png)

---

<div class="post-metadata">

**Author:** ![EricGT](https://avatars.discourse-cdn.com/v4/letter/e/f1d935/32.png) [@EricGT](https://meta.discourse.org/u/EricGT)\
**Post date:** [September 8, 2019, 8:33pm UTC](https://meta.discourse.org/t/new-badge-badge-icon-not-showing-on-badges-page/127978/7 "2019-09-08T20:33:45Z")

</div>

`fa-external-link-alt` works.

`far-external-link-alt` was wrong.

 ![image](https://global.discourse-cdn.com/meta/original/3X/3/4/343bdfc30d7eeaffb53a53e88458b66bb64c5314.png)

Awesome.

* * *

How to identify correct HTML to use for `Icon` field.

1. Go to [Font Awesome](https://fontawesome.com/?from=io)
2. Click [Icons](https://fontawesome.com/icons)
3. Find Icon.
4. Click on Icon, e.g. [external-link-alt](https://fontawesome.com/icons/external-link-alt?style=solid)
5. Mouse over HTML

![image](https://global.discourse-cdn.com/meta/original/3X/3/e/3ed83da43e80008127138f32207047f0851dffa7.png)

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

---

<div class="post-metadata">

**Author:** ![ondrej](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ondrej/32/198804_2.png) [@ondrej](https://meta.discourse.org/u/ondrej)\
**Post date:** [September 8, 2019, 8:35pm UTC](https://meta.discourse.org/t/new-badge-badge-icon-not-showing-on-badges-page/127978/8 "2019-09-08T20:35:24Z")

</div>

> [@EricGT](#):
>
> `far-external-link-alt` was wrong

Just what I originally thought 😊 happy to help!

---

<div class="post-metadata">

**Author:** ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)\
**Post date:** [October 8, 2019, 8:47pm UTC](https://meta.discourse.org/t/new-badge-badge-icon-not-showing-on-badges-page/127978/9 "2019-10-08T20:47:23Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.