Advanced Setup Without CDN

Want your web site pages to load icons without hitting the Font Awesome CDN? Read on.

Starting with Version 5 of our WordPress plugin, icons are added as inline SVGs when using the Icon Chooser. The full <svg> elements are included directly in the post content, and since the icon code is part of your WordPress site’s page content, they won’t load from a Kit or CDN when visitors view your site.

Is this for you?

This method is intended for sites that need to limit loading third-party resources - like CDNs - for end users.

If you’re just trying to setup Font Awesome in WordPress the simplest way, with all the magic already built-in, then use our standard WordPress plugin setup instead.

Set Up

Start by selecting a Kit in the plugin settings, then save your changes and the plugin will fetch the CSS stylesheet from Font Awesome CDN and store it in your uploads directory. That stylesheet is then served directly from your WordPress site - not the Font Awesome CDN. (You will still need to access the CDN when adding icons - and supporting files like CSS - to your content.)

Next, skip loading the Kit on your site by adding this filter to your theme’s functions.php file, or equivalent:

add_filter( 'font_awesome_skip_enqueue_kit', '__return_true' );

Now you can add icons using the Icon Chooser in the Block Editor, which adds icons as embedded SVGs.

Once you’ve set that up, your visitors’ browsers will not communicate with the Font Awesome CDN when viewing your site.

Only Works for Embedded SVG Icons

In this mode, because the Kit will not be loaded on the page, it will not render icons for <i> tags, [icon] shortcodes, or CSS pseudo-elements.

A Note on Working with Other Installed Font Awesome Versions

A common scenario is where you have a theme or other plugins who load their own versions of Font Awesome. They typically use <i> tags or CSS pseudo-elements for icons. If you allow them to continue loading their own Font Awesome assets, then they will likely continue to work as intended.

However, if you use the conflict detector to block loading of Font Awesome assets used by other plugins and themes, their icons will no longer load since there will be nothing on the page that knows how to render those <i> tags or pseudo-elements as icons.

Admin and Editor CDN Usage

While this mode eliminates the use of the Font Awesome CDN on the front end - as experienced by normal web site visitors - it does not eliminate the use of the CDN altogether. The Icon Chooser still uses the CDN for fetching the SVGs, as well as the GraphQL API for fetching information about your Kit and for performing searches. These requests only happen in the admin or editor interface, when configuring the plugin or editing content using the Icon Chooser.