FontAwesome not working after migration

Question

We have a website built on wordpress with a theme that uses FontAwesome.

We are trying to migrate the site to a new server. On doing this, everything copied over perfectly except the FontAwesome icons are now just showing as squares.

See on our homepage on zealify.com where the "down chevron" is visible, whereas on the new server (162.13.82.19) it is not.

Any ideas as to why this might be the case? All help appreciated!

Answer 1

It seems you are getting a 206 HTTP response, where the content is only partially loaded. This could be caused by a caching plugin but I can't be sure.

In your functions.php file, there should be a functions called wp_enqueue_style() that looks like so. You should note that your hook function is probably not called theme_name_scripts()

/**
 * Proper way to enqueue scripts and styles
 */
function theme_name_scripts() 
{
    // add this line
    wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' );
    // Example styles and scripts
    wp_enqueue_style( 'style-name', get_stylesheet_uri() );
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}

add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

Or if you're lazy and don't care for good practice, you could add the following line to header.php to make it work:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Answer 2

I realize this is a necrom-answer... but in case anyone else runs across this page, I found the solution to my similar symptoms here, from user Stuart Young.

Problem: After migration, the database is still set to load images and fonts from the old server. (Confirmed using devtools.) Webkit browsers like Chrome will happily ignore security best practices and go to the old server to fetch the requested resources. Other browsers (e.g., Firefox) will rightly refuse to load the fonts, and possibly the images as well.

Fix: Go to theme settings, change nothing, save, and it should rewrite the urls to match the current server. All efforts to fix the problem through the db were unsuccessful, but doing this solved the problem for me even though I'm using a completely different theme (Avada vs. Ai1ec).