Contents
1 Introduction
Previously, I used FontAwesome (Free version) for the icons of my blog links and menus, and the effect was pretty good:
However, at that time, FontAwesome's official CDN was used, and the following code needed to be inserted in WordPress:
<script defer src="https://kit.fontawesome.com/YOUR_KIT_ID.js" crossorigin="anonymous"></script>
Font Awesome is a CSS and LESS based font and icon toolkit, created by Dave Gandy for Twitter Bootstrap and later integrated into BootstrapCDN. Font Awesome has 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, see the article:Home Data Center Series WordPress Quickly Build a Personal Blog Zero-Based Newbie Direct Gift Package.
There is one biggest limitation of using the official FontAwesome CDN: a limit of 10,000 API requests per month. These 10,000 API requests are not actually calculated based on the number of times the icon is used, but rather based on the number of times the website requests FontAwesome resources. Simply put, every time a visitor opens a web page, the browser will send a request to FontAwesome's official CDN to obtain the relevant CSS and font files. This means that even if 10, 20 or even more FontAwesome icons are used on the page, as long as they all come from the same CSS file, only one API request is counted. However, if the website has a large amount of 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. When the number of requests exceeds 10,000, FontAwesome will suspend service, causing the icons on the website to not display properly, but to become blank or default placeholders, which is quite ugly:
Since this limit is calculated based on the "number of CDN visits" rather than simply the "number of icons on the page", if a WordPress site uses FontAwesome on its homepage and has a certain amount of traffic, such as 400 visits per day, it is likely to reach the limit around the end of the month. For sites with large traffic, this limit is even more obvious and may even be triggered in just a few days. Unfortunately, I started to encounter this at the end of August last year. Because the number of visits to my blog is just around "400 per day", I would receive an overage email notification from FontAwesome in the last few days of each month:
However, since I always used it up during the last few days of the month, I didn’t take it too seriously when the icon displayed abnormally for a few days and just pretended not to see it.
However, the situation is different now: I am already a noble Cloudflare Pro user, and the blog that I spent a huge amount of money on looks wrong for a few days every month. What's going on? It's really too low-class, and I must start to solve this problem, but how to solve it?
First, let's rule out the option of paying to upgrade to FontAwesome as a paid user: I only have about 20 icon fonts, and my traffic just exceeds the upper limit for Free users. It's totally not cost-effective to spend money on this level. Besides, I've already saved up and bought a Cloudflare Pro user, so how can I have any spare money?
Therefore, if you don’t want the normal loading of icons to be affected by API restrictions, the best way is to use the "local hosting of FontAwesome" method to completely bypass the limit on the number of requests. At the same time, combined with Cloudflare’s APO function, it can also provide faster icon font loading speed than when directly using FontAwesome’s official CDN. It’s really killing two birds with one stone. The content of this week’s homework has been happily decided!
Note 1: You can also consider other icon font providers like FontAwesome, such asBootstrap Icons,Remix IconThese are all completely free (just with fewer icon options), but since I need to change the script to load CSS and the icon font class, I'm too lazy to bother. Although I only need to change more than 20 classes, there is no need to trouble myself when there is a better solution, so I just gave up after a thought.
Note 2: There is another option, using FontAwesome SVG formatThe advantage of using this method is that Icons usually load faster because SVG files are lighter than font files and can be more finely controlled through CSS or JavaScript, such as changing the color, size, animation, etc.In addition, SVG icons are vector graphics, which can remain clear at any resolution and are suitable for high-resolution screens, such as Retina displays. However, since this method requires directly modifying the existing HTML code (for example, embedding it directly in menus, article content, or other places) <svg> Tags), which may cause some disruption to the existing layout and style.Directly host font files locallyThe method is simpler, without modifying the existing HTML structure, just make sure the font file and CSS path are correct. Therefore, I finally gave up the option of using the SVG format and decided to use the method of locally hosting FontAwesome fonts, which can avoid large-scale modifications to existing page content and is more convenient to maintain.
2 Specific operation steps
2.1 Download the compressed package of "FontAwesome"
When using FontAwesome Official CDN When Icon fonts such asThe CSS only defines the icon classes, but the actual font files (webfonts) can still be loaded from FontAwesome's server., so as long as you can access the official CDN, there will be no problem.
But if you choose to host FontAwesome locally, then just download CSS Files is not enough.CSS only defines the style of the icon and references the corresponding font file, while the actual icon shape information is stored in the font file.If the font file is missing, the browser cannot find the corresponding font resource when parsing CSS, which will eventually cause the icons on the page to not display correctly, appear blank or garbled. Therefore, to ensure that FontAwesome runs normally locally, in addition to downloading CSS Files, you also need to download Webfonts folder.woff2, .woff and other font files in , and correctly configure their paths so that CSS can load these font resources normally.
FontAwesome's official website has provided downloads of 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
After downloading and decompressing, the directory contents are as follows:
Delete all contents except the css and webfonts directories. The css directory only needs to keep one file: "all.min.css".
Why only all.min.css?
• all.min.css = Full version of FontAwesome Free (minimized)
• Other files (such as brands.css, solid.css) are Classification CSS, no need to load separately
• The webfonts are referenced in all.min.css to ensure that the icons can be displayed correctly
2.2 Upload "css" and "webfonts" to WordPress
Then in WordPress/wp-content/uploadsCreate a new directory under the directory, mine is "fontawesome", upload the two directories of css and webfonts to the newly created directory:
Then you need to verify whether the font file can be accessed normally. Taking my blog as an example, you can visit the following link to test whether the font is available:
https://blog.tangwudi.com/wp-content/uploads/fontawesome/webfonts/fa-solid-900.woff2
2.3 Loading FontAwesome in WordPress
Method 1: Load directly in the theme file "header.php"
Taking my blog as an example, just insert the following code 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
exist Code Snippets In the plugin, create a new "Run in the foreground" code snippet and select PHP code, then add the following code (replace "blog.tangwudi.com" with your domain name):
function load_local_fontawesome() { echo ' ' . "\n"; } add_action('wp_head', 'load_local_fontawesome');
Why do this?
• wp_head hook: Make sure this line <link> The code is inserted correctly <head> Instead of inserting it anywhere else on the page.
• More controllable: If you want to modify or remove it, just go to the Code Snippets plug-in and change it without manually changing the theme file.
2.4 Remove the code that previously loaded FontAwesome fonts through the official CDN
Since you have successfully configured local hosting of FontAwesome, all icon font resources will be loaded from the server of this site, and no longer rely on the official FontAwesome CDN. Therefore, the previous code for calling the official CDN (if any) is no longer necessary and should be removed to reduce unnecessary external requests and increase page loading speed. Usually, this code is inserted in the header.php file <head> section, or add it to your WordPress site through a plugin such as Code Snippets. It is recommended to check the header.php file or related plugin settings and find something like the following<script> Code:
<script defer src="https://kit.fontawesome.com/YOUR_KIT_ID.js" crossorigin="anonymous"></script>
If you use the Code Snippets plugin, look for the following code:
add_action('wp_head', function() { echo '
Once found, delete it to ensure a complete switch to local hosting mode.
2.5 Clear CDN cache
If you use a CDN to cache your site assets, there is one final step you need to take after switching to locally hosting FontAwesome:Clear all CDN cachesto ensure that visitors can get the latest FontAwesome code directly from the source site (unfortunately, I have to do it all over again with the content of my APO cache~).
This is because CDN caches 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 locally hosted version. This may cause some icons to not display properly or still rely on external FontAwesome servers.
How you do this depends on the CDN you use:
• If using Cloudflare, you can go to the Cloudflare dashboard, find your domain name, and select "Purge Everything" in the "Cache" option. If your FontAwesome-related file paths are fixed, you can also select "Custom Purge" to only clear specific CSS and font files.
• If you use other CDNs (such as Alibaba Cloud CDN, Tencent Cloud CDN, and Youpai Cloud), you also need to enter the corresponding CDN console and manually refresh the cache of CSS and font files.
In addition, if your WordPress site also uses a page cache plug-in (such as WP Rocket, W3 Total Cache, LiteSpeed Cache, etc.), it is recommended to clear the plug-in cache simultaneously to ensure that the new FontAwesome code can take effect immediately.
3. Afterword
对于使用的Argon主题的WordPress用户，通过官方文档可知，其默认就内置提供FontAwesome图标库，只不过版本较老，只是v4版本(具体来说是4.7版本)：
对于没什么特殊要求的朋友，使用默认的就可以了(只能使用v4版本的图标：https://fontawesome.com/v4/icons/)，除非是需要FontAwesome后续新版本(截止到2025年4月，最新为v7版本)，才需要使用文本的方式进行操作。
