Open trueblood12 opened 4 years ago
Hi!
Thanks for being part of the Font Awesome Community and thanks for this detailed report
Sorry, but I can't help. Leaving this open waiting for community feedback.
What I can see is that in the screenshot that doesn't show the icon, the font face of "Contact Us" is different
Hi @tagliala . Thanks for your reply. The font face of "Contact Us" is the same. What you're seeing is the difference of font rendering in Windows/Chrome and macOS/Safari.
We're still unsure where to turn to remedy this bug?
Can we have a reproducible test case?
Sure. I'll get that up ASAP. In the meantime, any thoughts on what might be going on?
I wanted to mention that we were able to get the icons to appear consistently once we backed out Bootstrap Utilities. We can probably close this issue unless someone has come across this and has found a work-around?
Describe the bug We understand there are a few other tickets that are similar in a way, but we haven't found any of those tickets to be closed with a solution that works for us. The bug we am experiencing is 2-fold, meaning that some icons aren't appearing, and some icons appear but are inconsistent when viewing them in macOC or iOS and Safari.
Version and implementation We're using a Gatsby / Contentful / Netlify JamStack site, using @fortawesome via npm and importing the packages in my components. Here are the versions currently in our package:
For implementation, we are importing the packages, then adding the necessary font awesome type bundles to the library. When using the icon, it gets wrapped in the:
Version: This is only happening on macOS or iOS and Safari. Windows is fine. macOS using any other browser but Safari is fine. We should note that when I use Browserstack emulators and choose an OS that allows us to get to Safari 8, the icons load and appear fine/consistent. So, this appears to be an issue with macOS or iOS and Safari 9.
Expected behavior We expect the icons to appear and look consistent across all browsers.
Screenshots For when the icon doesn't load:
Here is a screenshot of the icon loading (notice the "bars" icon):
Here is the same exact page/section in macOS and Safari (notice the "bars" icon doesn't appear):
For when the icon loads but is inconsistent in macOS or iOS and Safari:
Here is a screenshot of the icon (notice the "briefcase" icon):
Here is the same exact page/section in macOS and Safari (notice the inconsistent size of the "briefcase" icon):
Your, and anyone else's, help is greatly appreciated in advance!
Bug report checklist