I love Font Awesome and have used it for years on many websites. I used to use the Font Awesome hosted CSS files however these are no longer available. I use AMP on my website and love the speed that it delivers however I’ve found that using the Font Awesome WordPress plugin or using a site kit results in errors. More specifically the main error that I get is that Font Awesome won’t display in the Google Chrome browser due to Cross-Origin Resource Sharing (CORS) issues. The error is usually something like “Access to Font has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource”.
Time needed: 15 minutes
Here are instructions to host Font Awesome and use them in WordPress. The method in the steps below avoid CORS and other errors and ensure that AMP loads the font icons correctly.
- Download Font Awesome
Login to FontAwesome then download the latest version for the web. If you have a Pro account then download the Pro fonts otherwise the free will work too. Extract the compressed file you’ve downloaded (using 7-Zip or similar).
- Create a directory on your webserver
Using an FTP client such as FileZilla (or a file/directory browser provided by your webhost), create a new directory under /wp-content/uploads/ and call it something meaningful like font-awesome. You’ll therefore have a directory like /wp-content/uploads/font-awesome.
- Upload Font Awesome files to your webserver
Copy the files you downloaded from Font Awesome into the new directory you created. You only need to add the CSS and Webfont directories and files but it’s fine if you add all directories and files to the webserver.
- Make Font Awesome files load in WordPress
In your WordPress functions.php file add the following (adapt for your domain and folder that you created earlier):
function load_header_styles() {
wp_register_style(‘FontAwesomeCSS-local’,’https://your-domain/wp-content/uploads/font-awesome/css/all.css’);
wp_enqueue_style( ‘FontAwesomeCSS-local’);
}
add_action(‘wp_enqueue_scripts’, ‘load_header_styles’); - Test that icons load
Add a few Font Awesome icons to a page or post and test that the icons load as expected.
Leave a ReplyCancel reply