[Resolved] Font awesome only loads on certain pages

[Wim]

In my testsite http://iwim.be/demeyere/, I have some contactitems added to the primary menu with font-awesome. Fontawesome is forced to load in GP premium. The icons load on the homepage and the contactpage, but not in the pages inbetween. I know this can be forced using a hook, but I’d like to know why they don’t load on those pages.
Using Beaver builder, themer, justified image grid and Smart Slider 3 pro.
Any ideas? Thanks.

GeneratePress 2.0.1

GP Premium 1.5.6

[Leo]

Hi there,

That’s really weird. Can’t think of a reason why.

Can you try #1 here to eliminate plugin conflict first? https://docs.generatepress.com/article/debugging-tips/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Wim]

Tried to switch them on and off one by one, but when I switched off Beaver builder, font awesome was gone everywhere. Nothing really changed otherwise. Appears the font just doesn’t load.

[Wim]

I changed theme to 2017 and it gave me the same missing icons on three pages, so it’s probably not GP related. Debugging doesn’t give me any messages. Really weird.

[Wim]

Okay, found a workaround to make it work, but still don’t know why it skipped those three pages.
I guess it will now load twice on the other ones.

Htaccess:

<IfModule mod_headers.c>
    <FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css|css|js|gif|png|jpe?g|svg|svgz|ico|webp)$">
        Header set Access-Control-Allow-Origin "*"
    </FilesMatch>
</IfModule>

functions.php

function enqueue_our_required_stylesheets(){
    wp_enqueue_style('font-awesome', 'https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css');
}
add_action('wp_enqueue_scripts','enqueue_our_required_stylesheets');

[Tom]

Cross origin issues happen when the URL you visit in your browser doesn’t match the URL serving the icons (set in “Settings > General”).

Also, you don’t need the second function as long as essentials are turned off in Customize > General.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Wim]

Indeed Tom, I removed the function but kept the htaccess and icons still show when essentials are turned off.
I guess I thought a phone, mailsymbol and social media icons were essential – but they didn’t seem to be essential for the theme to function, which is understandable.
Could we check online what symbols are included (as there are 675 in the new font awesome library)?
Thanks for the good advice and a great theme!

(the only thing I still crave is the ability to set the mobile breakpoint instead of adding a chunk of css ;))

[Tom]

GP is currently using Font Awesome 4.7, so all of the icons in that version are included (when essentials are turned off).

We’ll be updating to Font Awesome 5 once we can get backwards-compatibility figured out 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts