跳到内容
认识 Web Awesome,这是最大最好的开源 Web 组件库。
立即预订!

帮助和故障排除

在 Web 上使用时遇到问题?以下是一些常见的问题以及如何解决这些问题的办法。

我想要使用的图标丢失了或没有显示?

我们讨厌这种情况发生(是的,它可能发生在我们身上,甚至更多)。首先,请仔细检查以下几件事。

您尝试使用的图标是否在您项目中使用的 Font Awesome 版本中可用?

我们现在频繁发布图标。确保您使用的是最新版本。您可以在其详细信息页面上查看图标添加的版本。

您使用的是 Font Awesome Free 还是 Pro?

某些图标仅在 Font Awesome Pro 中可用。仔细检查您想要的图标是否在您引用的 Font Awesome 版本中。此外,请确保您使用并引用正确的样式前缀和支持文件以使用 Pro 图标。

自行托管 Font Awesome

如果您自己托管 Font Awesome 副本,请检查您是否已移动所有使用所需图标所需的文件。此外,请仔细检查 HTML 的 <head> 中这些文件的路径。

您是否输入了正确的图标名称或前缀?

这是经常困扰我们的问题。请确保在 添加图标 时,您没有输入错误的图标名称。

您的网站是否加载了多个冲突的 Font Awesome 版本?

当使用像 WordPress 这样的 CMS 或像 Jekyll 这样的框架(允许您添加包含自己版本的 Font Awesome 的主题或插件)时,这是一个常见问题。或者,如果您忘记删除很久以前设置的旧版本 Font Awesome。您的网站应该只加载您打算设置的 Font Awesome 版本。否则,可能会出现其他故障排除技巧无法解决的混乱状况。

如果您使用的是工具包,请尝试在工具包设置中启用冲突检测选项以发现此类问题。如果您的网站确实加载了多个冲突的版本,那么您应该首先解决该问题。您的网站应该只加载您打算设置的 Font Awesome 版本。否则,可能会出现其他故障排除技巧无法解决的混乱状况。

您是否使用的是 Sharp 图标?

您需要 Pro 许可证 以及 Font Awesome v6.2.0 或更高版本才能使用我们的 Sharp 图标。

如果您使用的是工具包,请检查 工具包设置 是否显示您使用的是“最新 6.x”版本。

如果您使用的是 npm 包,请验证您的 package.json 文件是否显示您使用的是 Font Awesome v6.2.0 或更高版本的图标包。

我想要使用的图标显示了,但样式错误。

您是否引用了正确的样式前缀? - 随着版本 6 的发布,我们在 Font Awesome 中拥有所有图标的实心、普通、浅色、双色调和细线样式。我们还将品牌图标分隔到自己的样式/类别中,以便更容易使用。以下是在实际操作中使用的不同样式前缀。

<!-- fa-solid or fas for solid style -->
<i class="fa-solid fa-camera"></i>
<!-- fa-regular or far for regular style -->
<i class="fa-regular fa-camera"></i>
<!-- fa-light or fal for light style -->
<i class="fa-light fa-camera"></i>
<!-- fa-duotone or fad for duotone style -->
<i class="fa-duotone fa-camera"></i>
<!-- fa-thin or fat for thin style -->
<i class="fa-thin fa-camera"></i>
<!-- fa-sharp or fass for sharp solid style -->
<i class="fa-sharp fa-solid fa-camera"></i>
<!-- fa-brands or fab for brands style -->
<i class="fa-brands fa-twitter"></i>

我使用 CMS 或 Web 发布工具(如 WordPress、Squarespace 或 Wix)。如何在网站中使用 Font Awesome?

对于 WordPress,我们有一个 官方插件 支持 Font Awesome 5。支持 Font Awesome 6 的插件版本正在开发中。

对于其他工具,虽然我们将草拟更多说明,并可能在将来提供工具以提供更多帮助,但现在,如果您在您的网站构建工具中拥有访问权限,最好的办法是 按照快速入门指南 进行操作。但您需要熟悉 HTML。

我的网站使用带有 Font Awesome 的主题。如何使用 Font Awesome 版本 6?

我们托管的 Font Awesome 工具包 可能有助于解决此问题。工具包设置中内置了冲突检测选项,可以帮助识别加载的版本。如果主题使用 Font Awesome 4,工具包还具有启用版本 4 兼容性的功能,该功能可以立即解决您的项目可能仍然加载的旧版本 Font Awesome 产生的任何冲突。启用 **版本 4 兼容性** 功能后,此功能将帮助解决项目中可能仍然加载的旧版本 Font Awesome 产生的任何冲突。

如果您自己托管 Font Awesome 6 或不使用工具包,并且无法覆盖主题中使用的 Font Awesome 资产,您需要联系主题开发人员/设计师,并要求他们升级主题以使用 Font Awesome 6。

可以将 Font Awesome 6 和旧版本一起使用吗?

不,我们不建议这样做,因为许多 CSS 类名、图标 Unicode 值和支持样式都存在大量重叠。会发生很多冲突,我们无法保证图标在这种情况下的渲染效果与您的预期或我们的预期一致。此外,加载这么多图标和资产不利于网站或应用程序的性能。

可以将自己的或自定义图标添加到 Font Awesome 吗?

当然可以!我们现在拥有 工具包图标上传 功能,使您可以直接上传和提供其他图标,并享有与 Font Awesome 图标相同的魔力。您需要一个有效的 Pro 计划 和 Pro 工具包才能上传和使用这些图标。

或者,如果您正在寻找更全面的项目资产管理,也许我们自己的 Fort Awesome 更适合您?

Font Awesome 的文件大小对于我的项目来说太大。该怎么办?

最简单的选项是使用自动缩减到您使用图标的工具包。或者,您可以使用我们的 桌面缩减工具(版本 6 支持即将推出!)或 自行托管,只加载项目中使用的样式。

我的上传图标出现问题!

如果您在上传图标时遇到问题,请确保检查 图标准备建议

如果您已上传图标,但它无法在项目中加载,请仔细检查您的项目是否引用了正确的工具包,并确保您使用的是 fak 样式,而不是官方 Font Awesome 样式(如 fasfar)。

如果这些都没有帮助您,我们专门针对 排查图标上传问题 提供了一个部分,这可能有助于解决您的特定问题。

为什么我的双色调图标无法正常工作?

听起来很麻烦!我们专门针对 双色调图标故障排除 提供了一套方案。

为什么我的工具包在我的项目中无法正常工作?

嗯。请确保您已正确复制工具包的唯一工具包嵌入代码。此外,请确保您没有使用子资源完整性 (SRI) 或内容安全策略 (CSP)。这些高级安全功能与我们的工具包产品不兼容。

为什么 Pro CDN 在我的项目中无法正常工作?

嗯。请再次确认你已经添加了你想要使用 Pro CDN 的域名,以及是否需要包含 "www."。最后,请确保你的 Font Awesome Pro 订阅(赋予你访问我们所有服务的权限)处于激活状态。

是否有地方可以看到 Font Awesome 提供的所有样式选项?

在版本 6 中,我们添加了许多新的样式和样式选项。如果你想查看我们提供的不同图标样式,请查看 Font Awesome 的样式

如果你想查看所有开箱即用的图标样式选项,你可以查看 样式选项

如果你正在寻找所有启用的 CSS 自定义属性的快速参考,请查看 样式速查表

为什么我的动画图标没有动画?

确保你的系统设置没有阻止动画。你可以检查它或 在用户偏好设置中更改它

我开始使用 Sharp Thin 的 .fast CSS 类,现在我的网站字体被破坏,动画也不起作用。

旧版本的 animate.css 也使用 fast CSS 类选择器来控制动画速度。

由于 Font Awesome 也使用此类选择器,它们相互冲突。

你可以通过将 animate.css 升级到新版本来解决这个问题,或者你可以在你的 CSS 中添加这个例外来解决这些问题。

.animated.fast {
font-family: inherit;
}

我的问题或问题没有得到这些信息的解答。该怎么办?

请告诉我们!给我们反馈。我们一直在倾听,并希望让 Font Awesome 变得尽可能出色。