字体图标显示问号圆圈问题

Question

我在WordPress网站上使用字体图标时遇到了问题。无论我使用什么图标，我都只能看到闪烁的带问号的圆圈。以前从未遇到过这样的问题。 我拥有的图标的截图

- Виктор Баранник

---

你是否已经包含了 Font Awesome 的 CSS？ - Sunil Dora

看起来好像有其他的CSS规则覆盖了默认的FontAwesome规则。你能确认一下fontawesome.css文件是否已经加载？并提供与屏幕截图中图标相关的CSS规则。此外，还请提供字体的HTML标记。 - Samvel Aleqsanyan

你在浏览器控制台中看到错误吗？可能是因为你的https网站上有http Font Awesome链接。 - WhereDidMyBrainGo

Answer 1

在我的情况下，是因为我为品牌图标编写了无效的前缀：

<i className="fa fa-instagram">

而不是

<i className="fab fa-instagram">

版本4只有一个前缀——fa，但旧版本有4个前缀。

请查看升级说明：从4升级

- user7285037

---

哦，“但是旧版本有4个前缀。” - 我猜你的意思是较新的版本；-) （也就是FA5） - MBaas

谢谢。在我的情况下，我使用了“fa”而不是“far”。当然，这是基于您的想法。 - SirSaleh

Answer 2

所有东西都被添加了。但问题出在手动添加的第二个 font-awesome 脚本上。删除这个脚本后，问题就消失了。

- Виктор Баранник

Answer 3

带问号的圆圈是一个缺失图标指示器，用于帮助调试缺失的图标或输入错误的图标名称。在https://fontawesome.com/how-to-use/with-the-api/setup/configuration#showmissingicons上阅读更多信息。

这意味着FontAwesome已正确安装，但您尝试使用的图标不存在。

可能您试图使用旧的className。从版本5开始，FontAwesome使用新的前缀。版本4只有一个前缀 - fa。版本5有四个前缀，让我们设置图标的样式。

例如：

<i class="fa fa-camera-retro"></i>  <!-- version 4's syntax -->
<i class="fas fa-camera-retro"></i> <!-- version 5's syntax -->

想了解有关从版本4升级的更多信息，请访问以下网址：https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4

- Cichy

---

这是我的问题，因为我在 Font Awesome 网站上查看了错误版本的免费图标列表！似乎不同的版本具有不同的可用图标和名称。 - Jeff Spicoli

Answer 4

我曾经也遇到过同样的问题（使用fontawesome 5），直到我意识到我只链接了fontawesome CSS，没有链接JS。下载完整的字体包并在本地使用FA也可以解决这个问题。

- yulia

Answer 5

可能是因为您没有使用最新版本的fontawesome。请更新您的版本，然后再试一次。

原始答案翻译成中文为"最初的回答"。

- cheese

---

更新版本对我有用。版本设置已从CDN转移到kits：https://fontawesome.com/kits/ 今天是5.14。 - Bob Stein

Answer 6

在我的情况下，问题是加载的FA CSS版本与JS不同。确保FA CSS和JS版本匹配以解决问题。

- zumek

Answer 7

我发现仅仅从 Font Awesome 网站上复制代码很少能够成功。我刚刚这样做了——包括他们给我的 CDN 代码，但结果却是一个闪烁的感叹号。将它从 far 改为 fa 就解决了问题。看来他们并没有很好地管理自己的网站。

- hoodun

---

他们的网站没问题；你复制了版本5的代码；你的网站正在加载版本4。 - robrecord

Answer 8

一般来说，FontAwesome网站默认显示所有图标。
没有订阅的非免费图标显示为一个问号加圆圈。
要使用免费图标，请在网页上找到"Free"按钮或使用此链接：
https://fontawesome.com/search?q=term&o=r&m=free

- Pavol Varga

---

这句话的意思是“你的问题可能是由于你在做X。所以解决方案可能就是要做完全相同的事情，也就是X。”请重新表达以避免混淆。 建议重新表述如下：“这里的意思是，你目前遇到的问题跟你正在进行的 X 有关。因此，为了解决问题，需要采取某些与 X 不同的措施。” - Yunnosch

Answer 9

可能与插件冲突有关。我也遇到了同样的问题。我的图标对于已登录的用户运行良好，但在他们注销后变成闪烁的问号。我在FA设置的故障排除部分中运行了Fontawesome冲突扫描器，结果发现与3CX Live Chat插件冲突。当我禁用它时，一切正常。我将通知3CX Live Chat有关此问题。希望这能帮助正在处理此问题的人。

- Darren

Answer 10

下载 Font Awesome 插件并进行以下设置

- JAGJIT DHALIWAL