Solutions to Potential Setup Issues: Font Awesome

This article was last updated on the December 9, 2016.

It is of critical importance to us that X maintains the highest standards in theme development. We are continually building upon our platform to not only bring you new features, but architectural solidarity. While we have done everything we can to ensure that your setup and usage of X goes as smoothly as possible, occasionally errors do arise. Oftentimes, these issues occur simply due to a server configuration or rogue plugin interfering with X. We have put this section together in an attempt to help you better troubleshoot these potential problems should they occur.

CORS and Font Awesome

A common issue with Font Awesome icons missing is due to the domain being requested outside the domain of which the resource originated.

Which means we need to enable something called “CORS” To quote Wikipedia

Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources (e.g. fonts) on a web page to be requested from another domain outside the domain from which the resource originated.

Enabling CORS is a relatively simple straightforward. Below, we’ll cover how to enable CORS on Apache, Nginx & Microsoft IIS, first though, we’ll cover how to find out what technology your site is running on if you don’t already know.

Finding Server Software

You can find out what type of tech your site is utilizing, by using the great tools over at Netcraft, Click here to visit netcraft.

Once your on the site report page, you should see a box where you can enter a URL like this.

netcraft lookup

For example go ahead and type in http://wordpress.org and scroll down to the “hosting section”, we’ll see that WordPress.org is using Nginx.

WordPress.org using Nginx

Go ahead and enter in your domain/URL to find out what you’re using. Got it? Excellent! Follow on below, not sure still what type you’re using. No worries, we’d recommend contacting your host and they can let you know.

Enabling CORS on Apache

In this section, we’ll cover enabling CORS on apache, this article will cover the .htaccess method, rather than the httpd.conf method, both worth perfectly fine and neither one is better than the other. Just different.

Without further ado, open up your .htaccess file. You can access your .htaccess file either via FTP or your cPanel’s file manager. Once you’ve got it open, right now it should look something like this.

Default WordPress .htaccess

The above image is the default WordPress .htaccess for a single site install, installed in the root of a domain. Your one may look different depending on a few factors, which are.

  • If you’re using a single site or multisite install
  • Which version of WordPress you originally started with, i.e, if you started your site on WordPress 3.4 or below with a multisite install, you’d have a different .htaccess than the current multisite install.
  • If you’ve installed WordPress in a directory other than the root path, for example /public_html/mycoolsite, rather than just /public_html

You can find examples of most types of “default” WordPress .htaccess files here.

Now above your current WordPress rules, add the following:

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

Once you’ve done that, you should have a .htaccess that looks similar to this.

.htaccess with CORS enabled

Save that and you’re done! CORS is now enabled and your icons should be showing, congrats!

Enable CORS on IIS 7.0 and Up

Before we get started, you should note that there are many different IIS setups and configuration possibilities, because of this we can’t possible cover every situation, but hopefully the below should help you get started

Open up your web.config, which should look similar to this:

The above image is for a IIS 7.0 web.config using a WordPress single site install and pretty permalinks. You can see the default web.config on the WordPress.org site here as well.

Add the following to your web.config file:

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
  </customHeaders>
</httpProtocol>

Now you’ve added that your web.config should look similar to this:

Cors web.config

Save that and you should now be good to go. Congrats!

Enable CORS on Nginx

Before we continue, you should have a basic understanding of Nginx configuration and server blocks. If you have any issues adding the code or don’t know where to add the code, we’d recommend contacting your host for assistance. If you don’t have direct access to your server you may also need assistance from your host.

There’s a couple of ways to include the code, we’re about to add, you can either include it in your server block (include it multiple times, if you have multiple server blocks), or you can include it under a directory like /etc/nginx/cors and saving it as cors_support. Then in your server block, just add:

include cors_support;

So open up the file where you want to add cors support or create the file as explained above and enter the following code.

#
# CORS config for nginx
#

location / {
     if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        #
        #
        #
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        #
        # Custom headers and headers various browsers *should* be OK with but aren't
        #
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        #
        # Tell client that this pre-flight info is valid for 20 days
        #
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;
        return 204;
     }
     if ($request_method = 'POST') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
     }
     if ($request_method = 'GET') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
     }
}

Code sourced from Michiel Kalkman

Depending on your exact configuration and setup, Ubuntu or Debian etc, you may get a warning such as:

“add_header” directive is not allowed here

If you get such a error, connect to your server running nginx using SSH and enter:

sudo apt-get install nginx-extras

This will then enable the more_set_headers config

Error 404 not found

The most common cause of receiving a 404 for Font Awesome is on a Microsoft IIS web server, IIS doesn’t enable the .woff or .woff2 mime type by default, so we’ll need to add some additional rules to the web.config for this.

Open up your web.config file (this is for IIS 7 or later) and add the following:

<remove fileExtension=".woff"/>
<mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
<remove fileExtension=".woff2"/>
<mimeMap fileExtension=".woff2" mimeType="application/x-font-woff" />

So now if you used the default web.config for WordPress, you’d have something that looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="WordPress Rule" stopProcessing="true">
<match url=".*" />
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="index.php" />
</rule>
</rules>
</rewrite>
<staticContent>
<remove fileExtension=".woff"/>
<mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
<remove fileExtension=".woff2"/>
<mimeMap fileExtension=".woff2" mimeType="application/x-font-woff" />
</staticContent>
</system.webServer>
</configuration>

Save that and the Font Awesome should be working now.

Note: If Font Awesome still isn’t working, icons aren’t showing still etc, please clear your browser cache and any caching plugins you have installed, if they still aren’t showing, open up a support request here and our awesome support team will be right along to assist!