跳到内容
欢迎 Web Awesome,最棒的开源 Web 组件库。
立即预订!

帮助和故障排除

在 Web 上使用时遇到问题?以下是一些常见的障碍以及如何解决它们。

我想要使用的图标不见了或无法显示?

我们讨厌这种情况发生(是的,它可能经常发生在我们身上)。首先要做的是仔细检查一些事项。

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

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

您使用的是 Font Awesome 免费版还是专业版?

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

自行托管 Font Awesome

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

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

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

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

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

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

您使用的是 Sharp 图标吗?

您需要 专业版许可证 并使用 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 版本兼容性。当启用 4 版本兼容性 功能时,此功能将帮助解决项目中可能仍在加载的旧版 Font Awesome 版本的任何冲突。

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

可以同时使用 Font Awesome 6 版本和旧版本吗?

不建议这样做,因为许多 CSS 类名、图标 Unicode 值和支持样式存在大量重叠。会导致大量冲突,我们无法保证图标在这种情况下的渲染方式符合您的预期。此外,加载如此多的图标和资源对网站或应用程序的性能不利。

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

当然可以!我们现在有了 工具包图标上传 功能,您可以使用此功能将其他图标上传并与 Font Awesome 图标一起使用,并享受相同的魔法。您需要一个有效的 专业版计划 和一个专业版工具包才能上传和使用图标。

或者,如果您正在寻找更全面的项目资源管理,也许我们的 Fort Awesome 更符合您的需求?

Font Awesome 的文件大小太大,不适合我的项目。该怎么办?

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

上传图标时遇到问题!

如果您在上传图标时遇到问题,请务必查看 图标准备建议.

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

如果上述两种方法都没有帮助,我们有一个专门的 图标上传故障排除 部分,可能会帮助解决您的特定问题。

为什么我的双色调图标无法使用?

听起来很麻烦!我们有一套专门针对 双色调图标的故障排除

为什么我的工具包无法在我的项目中使用?

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

为什么 Pro CDN 无法在我的项目中使用?

嗯,仔细检查您是否已添加要使用 Pro CDN 的域,以及您是否已包含 "www."(如果需要)。最后,请确保您的 Font Awesome 专业版订阅(允许您访问我们所有服务)处于活动状态。

是否有地方可以查看 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 尽可能地出色。