1 Introduction

Previously, the icons for my blog's external links and menus were used in conjunction with FontAwesome (Free version) icon fonts, and the effect was quite good:

However, at that time, the official FontAwesome CDN was used, and the following code needed to be inserted into WordPress:

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

Font Awesome is a font and icon toolkit based on CSS and LESS. It was created by Dave Gandy for Twitter Bootstrap and later integrated into BootstrapCDN. Font Awesome holds a 20% market share among websites using third-party Font Scripts, ranking second after Google Fonts.

For a detailed introduction and usage of FontAwesome icon fonts, please refer to the article:Home Data Center Series: WordPress Ultra-Fast Personal Blog Setup - Zero-Base Beginner's Direct Promotion Gift Pack。

Using the official FontAwesome CDN has one major limitation: a limit of 10,000 API requests per month. This 10,000 API requests limit is actually not calculated based on the number of times icons are used, but rather on the number of times the website requests FontAwesome resources. Simply put, whenever a visitor opens a webpage, the browser sends a request to FontAwesome's official CDN to fetch the relevant CSS and font files. This means that even if there are 10, 20, or more FontAwesome icons used on a page, as long as they all originate from the same CSS file, it only counts as 1 API request. However, if the website has high traffic, such as hundreds or thousands of visitors per day, or if multiple pages rely on FontAwesome resources, the number of API requests will accumulate rapidly. Once the number of requests exceeds 10,000, FontAwesome will suspend the service, causing the icons on the website to fail to display properly, turning into blank spaces or default placeholders, which looks quite ugly:

Since this limit is calculated based on “CDN access frequency” rather than simply “the number of icons on the page,” if a WordPress site's homepage uses FontAwesome and has a certain amount of traffic, say an average of 400 visits per day, it is highly likely to reach the limit around the end of the month. For sites with higher traffic, this limit is even more pronounced and might even be triggered within just a few days. Unfortunately, I have been experiencing this since the end of last August, because my blog's traffic happens to be right around ”400 visits per day" on average, so I receive over-limit email notifications from FontAwesome in the last few days of every month:

But now, things are different: I am already a noble Cloudflare Pro user, and how can a blog that cost a huge amount of money look messed up for a few days every month? It really lowers the class, so I must set out to solve this problem. But how?

First, rule out the option of paying to upgrade to a paid FontAwesome user: I only have a scale of about 20 icon fonts, and my traffic just barely exceeds the limit for Free users. Spending money at this level offers absolutely no cost-performance ratio. Besides, I've already pinched pennies to purchase Cloudflare Pro, so where would I get extra spare cash?

Therefore, if you don't want the API limit to affect the normal loading of icons, the best way is to adopt the ”locally hosted FontAwesome” approach to completely bypass this request limit. Combined with Cloudflare's APO feature, it can also provide faster icon font loading speeds than directly using the official FontAwesome CDN before. It's truly killing two birds with one stone, so this week's task is happily decided!

Note 1: Actually, you could also consider other icon font providers similar to FontAwesome, such asBootstrap Icons、Remix Iconetc., which are completely free (just with fewer icon choices). However, because it requires modifying the script that loads the CSS and also changing the classes of the icon fonts, I was really too lazy to bother. Although it only requires changing 20-plus classes, there is really no need to make trouble for myself when there is a better solution, so I just thought about it and gave up.

Note 2: There is also another option, which is to use FontAwesome's SVG format, and the advantage of using this method is that icon loading speed is usually faster because SVG files themselves are lighter than font files, and they can be controlled more precisely via CSS or JavaScript, such as changing the icon's color, size, animation, etc.In addition, SVG icons are vector graphics, which can maintain clarity at any resolution, making them suitable for high-resolution screens like Retina displays. However, because this method requires directly modifying the existing HTML code (such as directly embedding <svg> tags), it might cause some interference with the existing layout and styles. In contrast,directly hosting font files locallyis much simpler, requiring no modification to the existing HTML structure, only needing to ensure that the font files and CSS paths are correct. Therefore, in the end, I gave up on using the SVG format option and decided to use the locally hosted FontAwesome font method, which avoids large-scale modifications to existing page content and is also easier to maintain.

2 Specific Steps

1 Download the ”FontAwesome” compressed package

When using official FontAwesome CDN , the and similar icon fonts on the page can display normally because, althoughCSS only defines the icon classes, the actual font files (webfonts) can still be loaded from FontAwesome's servers, so as long as the official CDN is accessible, there will be no issues.

But if you choose the locally hosted FontAwesome method, then simply downloading CSS files is not enough.CSS only defines the style of the icons and references the corresponding font files, while the actual icon shape information is stored in the font filesIf font files are missing, the browser cannot find the corresponding font resources when parsing CSS, which will ultimately cause the icons on the page to fail to display correctly, appearing as blank spaces or garbled characters. Therefore, to ensure FontAwesome runs normally locally, in addition to downloading CSS files, you also need to download the Webfonts folder's .woff2, .woff, and other font files, and correctly configure their paths so that CSS can load these font resources normally.

The official FontAwesome website already provides downloads for CSS and corresponding font files. The download links are as follows:https://use.fontawesome.com/releases/v6.7.2/fontawesome-free-6.7.2-web.zip

Why only all.min.css?

• all.min.css = Complete FontAwesome Free version (minified version)

• Other files (such as brands.css, solid.css) are categorized CSS, and do not need to be loaded separately

• all.min.css already references webfonts, ensuring that icons can display correctly

2 Upload ”css” and ”webfonts” to WordPress

Then, in WordPress's/wp-content/uploadsdirectory, create a new directory (in my case, ”fontawesome”), and upload the "css" and "webfonts" directories into this newly created directory:

Next, you need to verify whether the font files can be accessed normally. Taking my blog as an example, you can visit the following link to test if the fonts are available:

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

3 Load FontAwesome in WordPress

Method 1: Load directly in the theme file ”header.php”

Taking my blog as an example, simply insert the following code directly into the ”header.php” of the Argon theme (replace ”blog.tangwudi.com” with your domain name):

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

Method 2: Use the Code Snippets plugin

在 Code Snippets In the plugin, create a new snippet that “runs on the front-end”, select PHP code, and then add the following code (replace ”blog.tangwudi.com” with your domain name):

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

Why do this?

• wp_head hook: ensures that this line of <link> code is correctly inserted into <head> , rather than being randomly inserted elsewhere on the page.

• More controllable: If you need to modify or remove it, you can do so directly in the Code Snippets plugin without having to manually edit theme files.

4 Remove the code previously used to load FontAwesome fonts via the official CDN

Since self-hosted FontAwesome has now been successfully configured, all icon font resources will be loaded from your own server, no longer relying on the official FontAwesome CDN. Therefore, any previous code used to call the official CDN (if any) is no longer necessary and should be removed to reduce unnecessary external requests and improve page loading speed. Typically, this code would be inserted in the header.php file's <head> section, or added to the WordPress site via a plugin (such as Code Snippets). It is recommended to check the header.php file or related plugin settings to find code similar to the following<script> code:

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

If you used the Code Snippets plugin, look for the following code:

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"
});

Once found, delete it to ensure a complete switch to self-hosted mode.

5 Clear CDN cache

If you use a CDN to cache website resources, after switching to self-hosted FontAwesome, you will also need to perform one final step:Clear all CDN cache, to ensure that visitors can fetch the latest FontAwesome code directly from the origin server (unfortunately, my APO cached content has to be rebuilt all over again~).

This is because CDNs cache static resources (including CSS, JS, and font files). If the cache is not cleared in time, visitors may still load the old CDN version instead of the latest self-hosted version. This could cause some icons to not display properly, or still rely on external FontAwesome servers.

The specific operation depends on the CDN you use:

• If using Cloudflare, you can go to the Cloudflare dashboard, find your domain, and select “Purge Everything” under the “Caching” option. If your FontAwesome-related file paths are fixed, you can also choose “Purge by URL” to clear only specific CSS and font files.

• If using other CDNs (such as Alibaba Cloud CDN, Tencent Cloud CDN, Upyun, etc.), you will likewise need to enter the corresponding CDN console to manually refresh the cache for CSS and font files.

Additionally, if your WordPress site also uses page caching plugins (such as WP Rocket, W3 Total Cache, LiteSpeed Cache, etc.), it is recommended to clear the plugin cache at the same time to ensure that the new FontAwesome code takes effect immediately.

3 Afterword

For WordPress users using the Argon theme, according to the official documentation, it comes with the FontAwesome icon library built-in by default, but the version is older, being only v4 (specifically version 4.7):

For users with no special requirements, using the default is fine (you can only use v4 version icons:https://fontawesome.com/v4/icons/), unless you need subsequent newer versions of FontAwesome (as of April 2025, the latest is v7), in which case you will need to follow the steps in this text.