Learn how to properly reference FontAwesome via CDN, covering performance optimization, caching strategies, and fallback solutions
CDN (Content Delivery Network) is the fastest way to use FontAwesome icons. This guide covers various CDN solutions, optimization techniques, and best practices specially tailored for Chinese users.
| CDN | Speed | Reliability | Difficulty | Recommended |
|---|---|---|---|---|
| cdnjs (cloudflare) | Fair | High | Easy | ★★★☆☆ |
| jsDelivr | Good | High | Easy | ★★★★☆ |
| BootCDN | Fast | Medium | Easy | ★★★★☆ |
| Self-hosted | Fastest | Highest | Medium | ★★★★★ |
The simplest and most direct approach, suitable for quick prototyping and small projects:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">Pros: Zero configuration, globally available. Cons: Speed varies in China, no customization.
Load only the specific style CSS files you need (solid.min.css, brands.min.css, etc.)
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css">
<!-- Load only specific style CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css">Pros: Smaller file size, faster loading. Cons: Need to know which styles you use.
Use the SVG framework to render icons via JavaScript, with on-demand loading
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.min.css">Pros: Tree-shaking, smallest bundle. Cons: Requires JavaScript, slightly more complex setup.
Download FontAwesome files and host on your own Alibaba Cloud or Tencent Cloud OSS
Deployment Steps
<link rel="stylesheet" href="https://cdn.yourdomain.com/font-awesome/6.7.2/css/all.min.css">Pros: Full control, fastest in China. Cons: Requires server setup and maintenance.
Add preconnect hints to establish early connections to CDN servers
<link rel="preconnect" href="https://cdn.jsdelivr.net">
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
<link rel="preload" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css" as="style">Control how fonts are displayed while loading to improve perceived performance
/* swap for FOIT prevention (or optional depending on needs) */
@font-face {
font-family: 'Font Awesome 6 Free';
font-style: normal;
font-weight: 900;
font-display: swap; /* Set font-display to avoid FOIT */
src: url('.../fa-solid-900.woff2') format('woff2');
}Create custom icon subsets to reduce CSS and font file sizes
# Import CSS in project entry file
import { library, dom } from '@fortawesome/fontawesome-svg-core'
import { faHome, faUser, faGear } from '@fortawesome/free-solid-svg-icons'
library.add(faHome, faUser, faGear)
dom.watch() // Use SVG framework to dynamically load iconsAdd backup CDN links to ensure icons load even if the primary CDN is unavailable
<script>
// Check if icons loaded correctly, show fallback
window.onload = function() {
var test = document.createElement('i');
test.className = 'fa-solid fa-star';
test.style.cssText = 'position:absolute;visibility:hidden';
document.body.appendChild(test);
var ok = getComputedStyle(test).fontFamily
.indexOf('Font Awesome') !== -1;
if (!ok) {
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.min.css';
document.head.appendChild(link);
}
document.body.removeChild(test);
};
</script>