Shopify Question posted in
The Shopify help center can be found here.

Font Awesome icons break during any Javascript errors – Shopify

Why do Font Awesome icons show up as flashing question marks anytime there is a Javascript error on a page?

The correct Font Awesome icon flashes correctly for 1 second and then changes to ?

You can see some broken icons on this page for reference. Also worth noting this a Shopify site with plugins that may have errors from time to time so it’s hard to keep a site like this 100% console error-free. I’ve had this issues with both Font Awesome 4 and Font Awesome 5:

https://outdoor.best

Test on Chrome Version 65.0.3325.181
Mac High Sierra

enter image description here

Edit: I am silly and was calling both Font Awesome 5 Pro and Font Awesome 5 Pro free using the CDN. I deleted the free version and it is working now. I would delete this question but don’t want to be punished by Stack Overflow staff!

Tags:

2

Answers


  1. 0

    That’s because some icons changed from v4 to v5. For example, in that page you mention, the “sign in” icon, you can see in the source it’s marked as fa fa-sign-in and in Font Awesome Website it says it has changed to fas fa-sign-in-alt, and it says:

    This icon replaces Font Awesome 4’s fa-sign-in We created a shim to
    help folks upgrade easily their existing projects from Font Awesome 4
    to 5 and avoid those embarrassing missing icon moments.

    Login or Signup to reply.
  2. 0

    Font Awesome changes it icons from based on the version you are loading, I have experienced this myself where my icons suddenly become a ? icon

    Simply replace your icon as the current <i class="fas fa-sign-in-alt"></i> and your problem should be fixed

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search