家庭数据中心系列 WordPress 图标字体优化:本地托管 FontAwesome,告别 API 限制

1 前言

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

image.png

image.png

不过,当时是使用的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 就会暂停服务,导致网站上的图标无法正常显示,而是变成一个个空白或者默认的占位符,颇为难看:

image.png

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

image.png

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

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

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

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

注1:其实也可以考虑其他类似FontAwesome的图标字体提供商,比如Bootstrap IconsRemix 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

image.png

下载并解压缩之后目录内容如下:
image.png

删除除了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这两个目录上传到新建的目录中:

image.png

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

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');

image.png

image.png


为什么这样做?

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版本):

image.png

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

分享这篇文章
博客内容均系原创,转载请注明出处!更多博客文章,可以移步至网站地图了解。博客的RSS地址为:https://blog.tangwudi.com/feed,欢迎订阅;如有需要,可以加入Telegram群一起讨论问题。
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇
       
error:
zh_CN