新徽章:徽章图标未在徽章页面显示

我创建了一个新徽章,然后通过汉堡菜单进入徽章页面,以确保其显示正确。

目前一切显示正常,但“Useful Prolog Reference”徽章的图标在图片中缺失。

我查看了其他徽章作为参考,但没有发现任何我认为错误的地方。

我学会了使用 HTML 锚点而不是 Markdown 链接。


当前设置:

名称:Useful Prolog Reference
图标:far-external-link-alt
图片:
徽章类型:铜牌
分组:其他
描述:已添加链接到 Useful Prolog References
详细描述:
允许徽章用作磁贴:
可多次授予:已勾选
在公共徽章页面显示该徽章:已勾选
在徽章页面显示授予该徽章的帖子:
启用徽章:已勾选


Font Awesome: external-link-alt


另外,我比较了 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>

乍一看,似乎没有任何问题。

有什么修复建议吗?

那就用 Font Awesome 5:

fa-external-link-alt :check_mark:

不是……除非你想要不同的图标设计(如果我说错了请纠正我)
fas
far
fad
fal


已使用:fa external-link-alt

无变化。图标未显示。

我将尝试另一个 Awesome Font 看看会发生什么。

好的,没问题。有消息请告诉我们。

我能看到青铜。

使用 fa-certificate 有效。
它是从 Contributor 复制的,所以你的方向是对的。

fa-external-link-alt 可以正常工作。

far-external-link-alt 是错误的。

太棒了。


如何为 Icon 字段确定正确的 HTML 代码。

  1. 访问 Font Awesome
  2. 点击 Icons
  3. 找到所需的图标。
  4. 点击该图标,例如 external-link-alt
  5. 将鼠标悬停在 HTML 代码上

image

因此,在我的例子中,正确的 HTML 代码是 fa-external-link-alt

这正是我最初的想法😊 很高兴能帮上忙!