Font Awesome icons fails sometimes

Hi, @pablomiralles!

I will try to reproduce the problem, but as is random I can’t tell you in how much time it will appear. At least, I see that problem 2-3 times a week.

As it’s happening quite randomly, troubleshooting will be tricky.

However, from what we’ve seen in similar situations, there are two things you might want to immediately check:

1. Conflicting code: For this, I highly recommend using a plugin like Health Check. That’s best to use once you’re able to reliably reproduce the issue though. For using that plugin, you may want to look at our guide here: Troubleshooting using Health Check
2. Caching and optimization systems: In particular, you’ll want to look at any systems, from plugins for example, that are minifying scripts and see if disabling them helps.

Now it has happened again.

Notification icon showed this string: “??a”
The magnifier glass in single product showed this one: “?€?”
And the clean variation selection icon showed: “?€?”

I will try both things you are telling me, and if I can’t fix it I will post here again.

I will also post if all is working correctly, to let you Solve this issue.

Thank you!

I think the problem it’s that you are using the glyphs. I’ve seen that in font awesome is used codes like “\e000”. It is possible to change it to this version?

https://github.com/FortAwesome/Font-Awesome/blob/master/css/all.css

Hi @pablomiralles,

Thanks for the update. Yes, we are indeed using the glyphs like \e000. I recommend checking the Font Awesome Cheatsheet for the glyphs, which appear right next to the icon names.

For instance, \e000 is caravan-alt:

Link to image: https://d.pr/i/bjXhX3

The e000 is meant for use in CSS, whereas the caravan-alt is meant for use as HTML or for targeting the icon via CSS to style it.

It would be great if you could share a screenshot of the problem the next time you see the icons not appearing correctly.

Based on the “?€?” characters you shared, it seems like there is an encoding problem related to this existing Font Awesome bug.

Does the bug report look similar to the problem you are having?

Oh, in this post they are saying what I’m trying to explain.

I know how Font Awesome is used basically, so I think the real problem is when you are compiling your Font Awesome 5 in SASS.

This shows perfectly what I was trying to explain when I said “I think the problem it’s that you are using the glyphs”.

When I download StoreFront from the WordPress repository and I open the icons file, I can see you are not using \e000; format anymore, maybe because of compiling SASS.

The result I have when I open the icons.css file in StoreFront theme (storefront/assets/css/base/icons.css) is this:

That’s why I was saying that I think the problem is occasioned by this because maybe this format tends to fail more than the \e000; format

• This reply was modified 3 years, 5 months ago by pablomiralles.
• This reply was modified 3 years, 5 months ago by pablomiralles.

So, just as a request, if you can’t fix this using another version of FA5, it would be helpful that you separate your FA5 version from the icon styles you use (search icon cart, notification icon…), to be able to dequeue your FA5 and to queue a version that works fine.

Hi @pablomiralles,

Thanks for clarifying about the existing Font Awesome bug report.

In terms of Storefront, it looks like we have an existing enhancement request about improving Font Awesome integration by separating the icon styles that seems to confirm here that we are using SCSS.

Is the existing enhancement request similar to what you are asking about?

That is exactly what I would love to do. The request is from 2019, could it be implemented in the near future?

Great question! Per the Update Font Awesome to version 5.12.1 closed Github issue, it looks like this feature would not be implemented anytime soon:

as Storefront uses the SCSS files instead of the CSS file, including the latest Font Awesome CSS file remote, as suggested in that issue, will not work.

Please let me know if you have any further questions!

That would be all. Thank you!

I seem to be having this exact same issue and after days of searching I cannot seem to find a fix for it. All I’ve found is old posts regarding the issue but yet it still doesn’t seem to have been addressed and I’m struggling to understand why. Is this not classed as a bug?

I’ve read through this thread but not sure I’ve got my head around how I need to go about fixing it… is it a case of me finding all icons that seem to be affected by this and then manually target those CSS elements in my child themes stylesheet, set the CONTENT for each instance?

content: 'f078';

Something like this?

That’s for the following icon: down chevron

The icons that I seem to be having trouble with are the down chevrons (as above) in my main menu, the basket icon for the mini cart, and the search products field icon.

Much like the OP I’ve been struggling to debug the issue because 19 times from 20 they will load fine, but on the odd occasion they will load as random characters instead of an icon.

This display issue obviously doesn’t give much confidence in the brand to potential customers, and so I’m eager to find a fix.

Any help would be very much appreciated.

Hi @jeffreeeeey ,

Please create your own forum thread with the details of the issue so we can help further.