• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

OrganicWeb

Mailchimp Training & Consulting

  • Home
  • Services
    • Mailchimp Training
    • Mailchimp Consulting
  • Free Tools
    • Mailchimp Tutorials on YouTube
    • Subject Line Generator
    • Marketing Ideas Generator
    • Map Maker for Email
    • WhatsApp Click to Chat Generator
    • Avoid Email Going to Spam
    • Email Link Generator
    • Is Mailchimp Down?
    • Marketing Facts and Stats
  • Content
    • Blog
    • Videos
  • Contact & About
    • Contact
    • About

Get Font Awesome working in Firefox

Are you using Font Awesome in your WordPress website and have noticed that some icons don’t display in Firefox? I noticed exactly the same today where icon fonts showed perfectly in Chrome and Edge browsers but there was a flashing question mark in place of the icons in Firefox.

Why Font Awesome doesn’t work with Firefox

First off, let’s be clear that the issue with Font Awesome and Firefox is restricted to websites that load Font Awesome via a CDN. The reason for the issue is CORS and how it’s implemented in Firefox. There isn’t a fault with the implementation in Firefox but rather is a security precaution.

The safe way to get Font Awesome working in WordPress

The safest way to get Font Awesome icons to display consistently between browsers is to serve Font Awesome from your hosting server. Because the Font Awesome files will be served from your domain, the CORS issue won’t occur. In addition, we aren’t inadvertently weakening our website security.

Follow these steps to install and serve the Font Awesome files from your domain and have Font Awesome icons display in Firefox.

  1. Download the Font Awesome files and unzip.
  2. Load the files as unzipped to your server (in this example I saved the files to //srv/htdocs/wp-content/uploads/fontawesome).
  3. Save the script as below to your functions file.
// Register Script
function FontAwesome() {

	wp_register_script( 'FontAwesomeBrands', '//srv/htdocs/wp-content/uploads/fontawesome/js/brands.min.js', false, false, true );
	wp_enqueue_script( 'FontAwesomeBrands' );

	wp_register_script( 'FontAwesomeSolid', '//srv/htdocs/wp-content/uploads/fontawesome/js/solid.min.js', false, false, true );
	wp_enqueue_script( 'FontAwesomeSolid' );

	wp_register_script( 'FontAwesomeShims', '//srv/htdocs/wp-content/uploads/fontawesome/js/v4-shims.min.js', false, false, true );
	wp_enqueue_script( 'FontAwesomeShims' );

	wp_register_script( 'FontAwesomeFA', '//srv/htdocs/wp-content/uploads/fontawesome/js/fontawesome.min.js', false, false, true );
	wp_enqueue_script( 'FontAwesomeFA' );

}
add_action( 'wp_enqueue_scripts', 'FontAwesome' );

In the script I am loading the free Font Awesome files only in addition to the shim file.

Fix: Keep loading Font Awesome via CDN

It is possible to add some script to the .htaccess file on your server in order to have Firefox load Font Awesome from a CDN. I don’t like to override security settings therefore prefer to host the Font Awesome files locally; the option however is available to bypass the CORS limitation of Firefox loading Font Awesome from a CDN.

If you do want to keep using the Font Awesome CDN then adding the following to your .htaccess file should overcome issues displaying icons in Firefox:

<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

Found this useful? Please share:

Related

  • How to host Google fonts locally in WordPress (and boost Core Web Vitals SEO)
  • How to get Mailchimp Subscriber Popup working in WordPress
  • WordPress – How to add Social Media icons into a menu

Filed Under: WordPress

Watch Gary in action

Gary frequently adds Mailchimp instructional videos to his YouTube channel. Subscribe to keep updated.

→  Subscribe   ←

How to add an editable attachment to a Mailchimp campaign.

How to add, and send, coupon codes in Mailchimp.

Reader Interactions

Leave a Reply Cancel reply

You are here: Home / WordPress / Get Font Awesome working in Firefox

Primary Sidebar

Mailchimp write about my work

Read on Mailchimp.com

Learn from a Mailchimp Pro Partner

Signup to receive info about Gary's Mailchimp beginner and advanced classes.

Sign up

Gary on Australian National Radio

Changes are coming to the Australian Spam Act

Read Gary's article in SmartCompany

Meet Gary, Mailchimp Expert

Gary is a Mailchimp Expert and Partner. He delivers Mailchimp training and consulting services in Australia, New Zealand and Singapore. Gary presents at Mailchimp events and hosts the first, and only, Australian Mailchimp sponsored event. He is M.B.A. qualified from Henley Business School, U.K.

Contact Gary for your Mailchimp needs

Footer

Customer Rating

Mailchimp Pro Partners

Contact

Contact Gary for all your Mailchimp training, consulting and integration needs.

Contact Gary.

Copyright © 2022 · Sitemap · ABN: 40800872179 · Privacy Policy · Terms of Service