FontAwesome Self-hosting Guide

Deploy FontAwesome to your own server/CDN for full control over speed and availability

Self-hosting FontAwesome gives full control over caching, avoids CDN failure risks, and provides faster access in China.

Method 1: npm install + copy files (Recommended)

Most flexible approach, suitable for projects with build processes:

npm install and copy files to your static directory # ├── webfonts/ # │ ├── fa-solid-900.woff2 # │ ├── fa-regular-400.woff2 # │ ├── fa-brands-400.woff2

Most recommended method for projects with build processes

Method 2: Download Release ZIP

No npm/pnpm needed, directly download the official ZIP package:

Download the official release ZIP package wget https://github.com/FortAwesome/Font-Awesome/archive/refs/tags/6.7.2.zip unzip 6.7.2.zip # Files located at node_modules/@fortawesome/fontawesome-free/ # Copy css/, webfonts/, and js/ directories to your static resource directory. cp -r Font-Awesome-6.7.2/css /your-project/static/fa/ cp -r Font-Awesome-6.7.2/webfonts /your-project/static/fa/

Method 3: Alibaba/Tencent OSS

Best for Chinese users - upload to object storage with CDN:

Upload to Alibaba/Tencent Cloud OSS

Recommended configuration:

  • Configure browser and CDN caching rules
  • CDN pre-warm: Manually warm CSS and font files on new releases
  • Enable HTTPS: Free SSL certificates provided

Nginx Best Practices

Nginx configuration is critical for self-hosting performance:

# /etc/nginx/sites-available/fontawesome server { listen 443 ssl; server_name fa.yourdomain.com; root /var/www/fontawesome; index index.html; # Font files: 1 year cache + immutable location ~* \.(woff2?|ttf|eot)$ { expires 1y; add_header Cache-Control "public, immutable"; add_header Access-Control-Allow-Origin "*"; } # CSS/JS: 1 year cache location ~* \.(css|js)$ { expires 1y; add_header Cache-Control "public, immutable"; } # SVG: 1 week cache location ~* \.svg$ { expires 1w; add_header Cache-Control "public"; } # Enable Brotli compression (brotli module required) brotli on; brotli_types font/woff2 font/ttf text/css application/javascript; }

vs Public CDN: How to Choose

DimensionPublic CDN (cdnjs/jsDelivr)Self-hosted
DifficultyMinimal (one line)Server configuration required
China SpeedModerate (depends on CDN nodes)Controllable (OSS + CDN)
ReliabilityThird-party SLAFully controllable
CachingUncontrollableFully Customizable
Version ManagementAuto latestManual update
CostFreeOSS storage + CDN traffic (usually very low)
HTTPSHTTPSSSL cert needed

Update Version Notes

  1. Download the new version files
  2. Replace files in your static directory
  3. Purge CDN cache if using CDN
  4. Clear browser cache (Ctrl+Shift+R)
  5. Test icons display correctly
Use symlink for version management ln -s /var/www/fontawesome/6.7.2 /var/www/fontawesome/latest Use symlink for version management (avoid modifying HTML references) HTML always references /fa/latest/css/all.min.css, upgrade by updating symlink

FAQ

Check that all font file paths in CSS are correct and accessible

Only font files (woff2) are required; CSS and JS are optional based on usage

No. When all files are on your server, FontAwesome icons work completely offline in intranet environments. This is important for government, finance, military, and other internal network deployment scenarios.
Share

Related