Font Awesome CDN

Font Awesome CDN


Supercharge your Font Awesome icons - HTTP/2 - 100% Free

Font Awesome CSS



<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous">

Font Awesome CDN Stack


The Font Awesome CDN assets are delivered from top data centers locations around the globe to speed up delivery, provide lower latency and faster speed, and provide seemless open source integrations.

With 25+ data centres worldwide running SSD-optimized NGINX servers, Font Awesome assets are delivered to visitors faster. CORS and GZIP compression are both enabled by default ensuring Font Awesome is accessible from a separate domain and file size is optimized.

The latest version of Font Awesome is always up to date and available via the Font Awesome CDN. Transferred through low latency POPs that are HTTP/2 (SSL) supported ensures that assets are distributed as efficiently as possible.

Last update:

How To


Add Font Awesome CDN with HTML

Easily add font awesome to any HTML or static site.

  1. Paste the following code into the <head> section of your site's HTML.
    <link href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" rel="stylesheet">
     Make sure to clear any local caches. It might takes a few moments to grab latest version from CDN.
  2. Place icons anywhere with the <i> tag. Grab examples from Font Awesome.
    Example using CSS Prefix <fa> and icon's name. <i class="fa fa-database fa-lg"></i>  

Add Font Awesome CDN in WordPress

Easily add font awesome to any self-hosted WordPress site.

  1. In your WordPress dashboard's appearance editor place the following code into the <head> section of your site's header.php file.
    <link href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" rel="stylesheet">
     Make sure to backup your files before editing your WordPress theme and clear server cache.
  2. Place icons anywhere with the <i> tag. Grab examples from Font Awesome. You can also use the icons in your WordPress menus by inlining the code within the navigation label field.

(Optional) WordPress Function

You also have the option of adding font awesome using the WordPress wp_enqueue_scripts action.

Place the following code into your functions.php file.

function enqueue_our_required_stylesheets(){
    wp_enqueue_style('font-awesome', 'https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css');
}
add_action('wp_enqueue_scripts','enqueue_our_required_stylesheets');

Avoid Render-Blocking CSS

CSS by default is render-blocking (which includes your font awesome icons) when placed aboved-the-fold. Render-blocking refers to it causing a delay in the rendering of your page.

  1. To avoid render-blocking CSS, move your code right before your </body> section of your site's HTML.
    <link href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" rel="stylesheet">
     By doing this it will result in FOIT, flash of invisible text. But it will pass Google PageSpeed Insights warning.

Cross-Origin Resource Sharing (CORS)

CORS is already enabled by default. No configuration necessary. CORS allows for resources to be loaded from a domain other than the origin domain by sending HTTP request headers to the host domain that is hosting the resource. Having CORS enabled is usually required to properly display font awesome icons from a CDN. If for some reason you need to enable CORS on your origin server, follow the directions below.

Apache .htaccess

Place the following code into your .htaccess file.

<IfModule mod_headers.c>
    <FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css|css|js|gif|png|jpe?g|svg|svgz|ico|webp)$">
        Header set Access-Control-Allow-Origin "*"
    </FilesMatch>
</IfModule>

Nginx config

Place the following code into your nginx.conf file.

location ~ \.(ttf|ttc|otf|eot|woff|font.css|css|js|gif|png|jpe?g|svg|svgz|ico|webp)$ {
    add_header Access-Control-Allow-Origin "*";
}

Font Awesome Rocks


Font Awesome is a free icon library that allows you to use a large collection of vector icons that can be modified in color, size, and other attributes through CSS.


A few key features include:

  • Offers 605+ icons
  • Does not require JavaScript
  • Can be scaled to any size while maintaining the same level of quality
  • Compatible with all frameworks
  • Can be used on the Desktop by setting it as a font in your application