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版本),才需要使用文本的方式进行操作。