带问号的圆圈，而不是字体真棒的图标答案

【问题标题】：Circle with question mark instead of font awesome's icons带问号的圆圈，而不是字体真棒的图标
【发布时间】：2018-03-12 12:36:26
【问题描述】：

我在 WordPress 网站上尝试使用字体真棒图标时遇到问题。无论我使用什么图标，我只看到带有问号的闪烁圆圈。以前从来没有遇到过这样的问题。 Screenshot with icons I have

【问题讨论】：

你是否包含了字体真棒CSS？
它看起来像一些其他的 css 规则覆盖了默认字体真棒规则。你能确认 fontawesome.css 文件正在加载吗？并提供与屏幕截图中的图标相关的 css 规则。另外，为字体提供 html 标记
您是否在浏览器控制台中看到错误？你可能在https 网站上有http Font Awesome 链接。

标签： wordpress font-awesome

【解决方案1】：

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

<i className="fa fa-instagram">

而不是

<i className="fab fa-instagram">

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

查看升级说明：upgrading-from-4

【讨论】：

错误，“但旧版本有 4 个前缀。” - 我猜你的意思是 较新的 版本 ;-)（又名 FA5）
谢谢。就我而言，我使用“fa”而不是“far”。当然是基于你的想法。

【解决方案2】：

所有内容都已添加。但问题在于手动添加的第二个字体很棒的脚本。删除此问题后消失。

【讨论】：

【解决方案3】：

这可能是因为你没有使用最新版本的 fontawesome。更新您的版本，然后重试。

【讨论】：

更新版本对我有用。版本设置已从 CDN 沙虫到 kits：fontawesome.com/kits 今天是 5.14。

【解决方案4】：

带问号的圆圈是缺少图标指示符，可帮助调试缺少图标或输入错误的图标名称。阅读更多关于https://fontawesome.com/how-to-use/with-the-api/setup/configuration#showmissingicons

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

您可能尝试使用旧的类名。从版本 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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

就我而言；问题是加载的 FA CSS 与 JS 的版本不同。

确保 FA CSS 和 JS 版本匹配以解决问题。

【讨论】：

【解决方案7】：

我发现仅仅从字体真棒网站复制代码很少奏效。刚刚做到了——包括他们给我的cdn代码，并且有一个闪烁的感叹号的相同结果。将其从 far 更改为 fa 修复了它。猜猜他们没有很好地管理他们的网站。

【讨论】：

他们的网站很好；您复制了版本 5 的代码；您的网站正在加载第 4 版。

【解决方案8】：

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

【讨论】：

【解决方案9】：

刚刚体验过，就像引用一个实际上不存在的图标一样简单 (far fa-remove)。不确定这是否是一个错误并且它从未起作用，或者我是否在某个时候更改了 Font Awesome 的版本并且该图标后来被删除/重命名。

我建议您首先在 fontawesome.com 上搜索您想要的图标。

【讨论】：

【解决方案10】：

可能与插件冲突有关。我遇到过同样的问题。我的图标对于已登录的任何人都可以正常工作，但在注销时会变成闪烁的问号。我在 FA 设置的疑难解答部分运行了 Fontawesome 冲突扫描程序，结果发现它与 3CX 实时聊天插件发生冲突。当我禁用它时，一切正常。我会通知 3CX Live Chat 这个问题。希望这对处理此问题的人有所帮助。

【讨论】：