Contents

1 前言

之前，我博客外链以及菜单的图标都是配合FontAwesome(Free版)的图标字体来使用，效果也蛮不错：

不过，当时是使用的FontAwesome官方的CDN，需要在WordPress中插入如下代码：

<script defer src="https://kit.fontawesome.com/YOUR_KIT_ID.js" crossorigin="anonymous"></script>

Font Awesome 是一个基于CSS和LESS的字体和图标工具包，它由Dave Gandy制作，用于Twitter Bootstrap，后来被集成到BootstrapCDN 中。Font Awesome在使用第三方Font Scripts的网站中占有20％的市场份额，排在Google字体之后的第二位。

关于FontAwesome图标字体的详细介绍和使用参见文章：家庭数据中心系列 WordPress极速搭建个人博客之零基础新人直升大礼包。

使用FontAwesome官方CDN这种方式有个最大的限制：每月 10,000 次 API 请求的限制。这个 10,000 次 API 请求其实并不是按图标使用次数计算的，而是按网站请求 FontAwesome 资源的次数计算的。简单来说，每当有访客打开网页，浏览器就会向 FontAwesome 的官方 CDN 发送一次请求，获取相关的 CSS 和字体文件。这意味着，即使页面上用了 10 个、20 个甚至更多的 FontAwesome 图标，只要它们都来源于同一个 CSS 文件，就只算 1 次 API 请求。但如果网站流量较大，比如每天有几百上千个访客，或者有多个页面都依赖 FontAwesome 资源，那么 API 请求数就会迅速累积。当请求次数超过 10,000 次时，FontAwesome 就会暂停服务，导致网站上的图标无法正常显示，而是变成一个个空白或者默认的占位符，颇为难看：

由于这个限制是按 “CDN 访问次数” 计算的，而不是单纯按 “页面上图标的数量” 计算，因此如果一个 WordPress 站点的首页使用了 FontAwesome，并且有一定的访问量，比如日均 400次访问，那么很可能在月底左右就会达到上限，而对于流量较大的站点，这个限制就更加明显，甚至可能在短短几天内就被触发。很不幸，我从去年8月底就开始遭遇了，因为我博客的访问量算起来刚好就是”日均400″左右，所以每个月的最后那几天都会收到FontAwesome发送的超额邮件通知：

不过由于每次都是月底那几天用完，几天图标显示异常我也没太当回事，当没看见就行了。

但是，现在情况又有所不同：我已经是高贵的Cloudflare Pro用户了，而花费了巨额money的博客居然每个月都有那么几天看起来不对劲算怎么回事？实在是太掉档次，必须着手解决掉这个问题了，可是如何解决呢？

首先排除给钱升级 FontAwesome 付费用户这个选择：我就20几个图标字体的量级，访问量也是刚好超过Free用户的上限，这种程度还花钱就完全没有性价比了，况且，我都已经省吃俭用购买了Cloudflare的Pro用户了，哪还有闲钱？

因此，如果不想被 API 限制影响图标的正常加载，最好的办法就是采用”本地托管FontAwesome”的方式，彻底绕过这个请求次数的限制，同时结合Cloudflare的APO功能，还能提供比之前直接使用FontAwesome官方CDN时更快的图标字体加载速度，完全是一箭双雕啊，那本周的作业内容就这么愉快的决定了！

注1：其实也可以考虑其他类似FontAwesome的图标字体提供商，比如Bootstrap Icons、Remix Icon等，这些都是完全免费的(就是图标的选择少点)，不过由于需要改加载CSS的脚本，另外还要改图标字体的class，我实在是懒得折腾。虽然只需要改20多个class，但是在有更好的解决方案的前提下，实在是没必要自己给自己找麻烦，所以只是想了想就放弃了。

注2：还有一个选择，采用 FontAwesome 的 SVG 格式，使用这种方式的优点在于 图标的加载速度通常较快，因为 SVG 文件本身比字体文件要轻便，而且可以通过 CSS 或 JavaScript 进行更精细的控制，如改变图标的颜色、大小、动画等。此外，SVG 图标是矢量图，能够在任何分辨率下保持清晰，适用于高分辨率屏幕，比如 Retina 显示屏。不过，由于这种方式要直接修改现有的 HTML 代码（例如在菜单、文章内容或其他地方直接嵌入 <svg> 标签），可能会对现有的布局和样式造成一些干扰，相比之下，直接本地托管字体文件的方式更为简便，无需修改现有的 HTML 结构，只需要确保字体文件和 CSS 路径正确即可。因此，最终我放弃了使用 SVG 格式这种选择，决定使用本地托管 FontAwesome 字体的方式，这样可以避免大规模修改现有页面内容，且维护起来也更方便。

2 具体操作步骤

2.1 下载”FontAwesome”的压缩包

当使用 FontAwesome 官方 CDN 时，页面上的 <i class="fa fa-user"></i> 之类的图标字体能正常显示，是因为虽然CSS 只是定义了图标的 class，但是真正的字体文件(webfonts)仍然可以从FontAwesome 的服务器加载，因此，只要能访问官方 CDN，就不会有问题。

但如果选择本地托管 FontAwesome 这种方式，那么仅仅下载 CSS 文件 是不够的。CSS 只是定义了图标的样式，并引用了对应的字体文件，而实际的图标形状信息则存储在字体文件中。如果缺少字体文件，浏览器在解析 CSS 时无法找到对应的字体资源，最终会导致页面上的图标无法正确显示，出现空白或乱码。因此，要确保 FontAwesome 在本地正常运行，除了下载 CSS 文件，还需要同时下载 Webfonts 文件夹中的 .woff2、.woff 等字体文件，并正确配置其路径，以便 CSS 能够正常加载这些字体资源。

FontAwesome官网已经提供了CSS及对应的字体文件的下载，下载链接如下：https://use.fontawesome.com/releases/v6.7.2/fontawesome-free-6.7.2-web.zip

下载并解压缩之后目录内容如下：

删除除了css以及webfonts这2个目录之外的内容，其中，css目录只需要保留一个文件：”all.min.css”即可。

为什么只要 all.min.css？

• all.min.css = 完整的 FontAwesome Free 版本（最小化版）

• 其他文件（如 brands.css、solid.css）是 分类 CSS，不用单独加载

• all.min.css 里已经引用了 webfonts，可以确保图标能正确显示

2.2 将”css”和”webfonts”上传到WordPress

然后在WordPress的/wp-content/uploads目录下新建一个目录，我这里是”fontawesome”，将css和webfonts这两个目录上传到新建的目录中：

然后需要验证一下字体文件能否被正常访问，以我博客为例，可以访问以下链接测试字体是否可用：

https://blog.tangwudi.com/wp-content/uploads/fontawesome/webfonts/fa-solid-900.woff2

2.3 在WordPress里加载FontAwesome

方式1、直接在主题文件”header.php”里加载

以我博客为例，直接在argon主题的”header.php”里插入以下代码即可(将”blog.tangwudi.com”替换为你的域名)：

<link rel="stylesheet" href="https://blog.tangwudi.com/wp-content/uploads/fontawesome/css/all.min.css">

方式2、使用code snippets插件

在 Code Snippets 插件里，新建一个“运行在前台”的代码片段，选择 PHP 代码，然后添加以下代码(将”blog.tangwudi.com”替换为你的域名)：

function load_local_fontawesome() {
    echo '<link rel="stylesheet" href="https://blog.tangwudi.com/wp-content/uploads/fontawesome/css/all.min.css">' . "\n";
}
add_action('wp_head', 'load_local_fontawesome');

为什么这样做？

• wp_head 钩子：确保这行 <link> 代码被正确插入 <head> 里，而不是随便插入到页面的其他位置。

• 更可控：如果要修改或移除，直接到 Code Snippets 插件里改就行，不用手动改主题文件。

2.4 移除此前通过官方CDN加载 FontAwesome 字体的代码

由于现在已经成功配置了本地托管 FontAwesome，所有图标字体资源都会从本站服务器加载，不再依赖 FontAwesome 官方 CDN。因此，之前用于调用官方 CDN 的代码(如果有)已经没有必要，应该将其移除，以减少不必要的外部请求，提高页面加载速度。通常，这段代码会被插入在 header.php 文件的 <head> 部分，或者通过插件（如 Code Snippets）添加到 WordPress 站点中。建议检查 header.php 文件或相关插件设置，找到类似以下的<script> 代码:

<script defer src="https://kit.fontawesome.com/YOUR_KIT_ID.js" crossorigin="anonymous"></script>

如果使用了Code Snippets插件，则找寻如下代码：

add_action('wp_head', function() {
    echo '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
});

找到后将其删除，以确保完全切换到本地托管模式。

2.5 清除CDN缓存

如果使用了 CDN 来缓存网站资源，那么在切换到本地托管 FontAwesome 之后，还需要进行最后一步操作：清除所有 CDN 缓存，以确保访客可以从源站直接获取最新的 FontAwesome 代码(可惜我的APO缓存的内容，又要重新来一遍了～)。

这是因为 CDN 会缓存静态资源（包括 CSS、JS 以及字体文件），如果不及时清除缓存，访客可能仍然会加载旧的 CDN 版本，而不是最新的本地托管版本。这可能导致部分图标无法正常显示，或者依旧依赖外部的 FontAwesome 服务器。

具体操作方式取决于你使用的 CDN：

• 如果使用 Cloudflare，可以进入 Cloudflare 仪表盘，找到你的域名，在“缓存”选项中选择“清除所有缓存”（Purge Everything）。如果你的 FontAwesome 相关文件路径是固定的，也可以选择“自定义清除”（Purge by URL），只清除特定的 CSS 和字体文件。

• 如果使用其他 CDN（如阿里云 CDN、腾讯云 CDN、又拍云等），同样需要进入对应的 CDN 控制台，手动刷新 CSS 和字体文件的缓存。

此外，如果你的 WordPress 站点还使用了页面缓存插件（如 WP Rocket、W3 Total Cache、LiteSpeed Cache 等），建议同步清除插件缓存，确保新的 FontAwesome 代码能够即时生效。

3 后话

对于使用的Argon主题的WordPress用户，通过官方文档可知，其默认就内置提供FontAwesome图标库，只不过版本较老，只是v4版本(具体来说是4.7版本)：

对于没什么特殊要求的朋友，使用默认的就可以了(只能使用v4版本的图标：https://fontawesome.com/v4/icons/)，除非是需要FontAwesome后续新版本(截止到2025年4月，最新为v7版本)，才需要使用文本的方式进行操作。

分享这篇文章