FortAwesome / Font-Awesome

The iconic SVG, font, and CSS toolkit
https://fontawesome.com
Other
73.71k stars 12.19k forks source link

macOS or iOS and Safari - Icons Either Don't Appear or Are Inconsistent #15849

Open trueblood12 opened 4 years ago

trueblood12 commented 4 years ago

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:

image

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 :

image

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): image

Here is the same exact page/section in macOS and Safari (notice the "bars" icon doesn't appear): image

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): image

Here is the same exact page/section in macOS and Safari (notice the inconsistent size of the "briefcase" icon): image

Your, and anyone else's, help is greatly appreciated in advance!

Bug report checklist

tagliala commented 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

trueblood12 commented 4 years ago

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?

tagliala commented 4 years ago

Can we have a reproducible test case?

trueblood12 commented 4 years ago

Sure. I'll get that up ASAP. In the meantime, any thoughts on what might be going on?

trueblood12 commented 4 years ago

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?