search

FortAwesome / Font-Awesome

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

Bug: Icons not shown in Safari #20401

Closed VARGA-Peter closed 3 weeks ago

VARGA-Peter commented 3 weeks ago

Bug description

When I load the fonts with my project URL, iOS Safari doesn't show the fonts. Loading it with this URL works.

According to several posts it looks like the integrity attribute should be added to the link. How do I get the value for my project?

Reproducible test case

n/a

Screenshots

image

Font Awesome version

latest from the kit

Serving

Kit

Implementation

CSS

Browser and Operating System

iOS Safari

Web bug report checklist

tagliala commented 3 weeks ago

Hi!

Thanks for being part of the Font Awesome Community.

Could you please provide a reproducible test case?

VARGA-Peter commented 3 weeks ago

Hi,

I prepared for you the real page with the broken fonts in Safari. Chrome, FF and other browsers show it correctly. https://skypex.io/awesome - scroll down to the footer.

When you check the HTML source you see which kit is loaded.

According to Internet, I should provide the integrity hash but I don’t know how to create it because when I access the kit directly it’s rejected due to “Not allowed when Origin missing”.

Can you tell me how to create the integrity hash? I didn’t find anything in the client area where I set up the kit.

Kind regards, Peter

From: Geremia Taglialatela @. Sent: Sonntag, 03. November 2024 19:39 To: FortAwesome/Font-Awesome @.> Cc: Office [FAF Software] @.>; Author @.> Subject: Re: [FortAwesome/Font-Awesome] Bug: Icons not shown in Safari (Issue #20401)

Hi!

Thanks for being part of the Font Awesome Community.

Could you please provide a reproducible test case?

— Reply to this email directly, view it on GitHubhttps://github.com/FortAwesome/Font-Awesome/issues/20401#issuecomment-2453532008, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ACJN7DSBGAAIJLEEEZMXJXLZ6ZUUTAVCNFSM6AAAAABRCWKYEWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDINJTGUZTEMBQHA. You are receiving this because you authored the thread.Message ID: @.**@.>>

tagliala commented 3 weeks ago

Hello,

I can't replicate on macOS Sequoia 15.1 / latest Safari

after a first look, I've noticed that Font Awesome is loaded twice:

image

As you can see there is a self-hosted css version and a JS kit

Loading it twice may lead to errors.

Please notice that there could be third parties loading their own version of Font Awesome and we can't provide support for third parties

Note: the kit ID is public. You must restrict allowed domains at https://fontawesome.com/kits/YOUR-KIT-ID/settings

VARGA-Peter commented 3 weeks ago

I know it's public. I'll restrict it. Please can you stop telling me that it's third party issue? When I download the fonts from the CDN link it works.

Check it on the iPhone or use any Safari emulator from Web. We have the issue.

Can you please answer my simply question how to get the integrity hash and stop writing stuff I am not asking for?

Kind regards, Peter

Sent from Samsung Fold 4

-------- Ursprüngliche Nachricht -------- Von: Geremia Taglialatela @.> Datum: 04.11.24 09:20 (GMT+01:00) An: FortAwesome/Font-Awesome @.> Cc: "Office [FAF Software]" @.>, Author @.> Betreff: Re: [FortAwesome/Font-Awesome] Bug: Icons not shown in Safari (Issue #20401)

Hello,

I can't replicate on macOS Sequoia 15.1 / latest Safari

after a first look, I've noticed that Font Awesome is loaded twice:

image.png (view on web)https://github.com/user-attachments/assets/2b221333-3d9b-4615-9713-23ada5bad1f7

Loading it twice may lead to errors.

Please notice that there could be third parties loading their own version of Font Awesome and we can't provide support for third parties

Note: the kit ID is public. You must restrict allowed domains at https://fontawesome.com/kits/YOUR-KIT-ID/settings

— Reply to this email directly, view it on GitHubhttps://github.com/FortAwesome/Font-Awesome/issues/20401#issuecomment-2454067403, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ACJN7DVYU2QMIQJWAQV5ENLZ64U2RAVCNFSM6AAAAABRCWKYEWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDINJUGA3DONBQGM. You are receiving this because you authored the thread.Message ID: @.***>

tagliala commented 3 weeks ago

Please can you stop telling me that it's third party issue?

Hello, please make sure that Font Awesome is loaded only once.

According to your use case, you should select:

  1. Self-hosted CSS
  2. CSS CDN (third-party, no longer offered directly by Font Awesome)
  3. Kit

At the moment, the website loads the CSS and the Kit version, this should be fixed

Can you please answer my simply question how to get the integrity hash

The integrity hash depends on the implementation you are going to use. If you are self-hosting the CSS, I think it is not necessary. If you are going to use the CDN (third-party), then the integrity hash should be included in the copyable <link> tag. If you are using the Kit, I'm not sure whether if it is possible, due to the nature of the Kit /cc @robmadole

VARGA-Peter commented 3 weeks ago

How can I download the CSS with my plan? I think, then the issue will be solved.

From: Geremia Taglialatela @. Sent: Montag, 04. November 2024 09:32 To: FortAwesome/Font-Awesome @.> Cc: Office [FAF Software] @.>; Author @.> Subject: Re: [FortAwesome/Font-Awesome] Bug: Icons not shown in Safari (Issue #20401)

Please can you stop telling me that it's third party issue?

Hello, please make sure that Font Awesome is loaded only once.

According to your use case, you should select:

  1. Self-hosted CSS
  2. CSS CDN (third-party, no longer offered directly by Font Awesome)
  3. Kit

At the moment, the website loads the CSS and the Kit version, this should be fixed

Can you please answer my simply question how to get the integrity hash

The integrity hash depends on the implementation you are going to use. If you are self-hosting the CSS, I think it is not necessary. If you are going to use the CDN (third-party), then the integrity hash should be included in the copyable tag. If you are using the Kit, I'm not sure whether if it is possible, due to the nature of the Kit /cc @robmadolehttps://github.com/robmadole

— Reply to this email directly, view it on GitHubhttps://github.com/FortAwesome/Font-Awesome/issues/20401#issuecomment-2454089853, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ACJN7DQG3AASPUI2VNUT5B3Z64WHZAVCNFSM6AAAAABRCWKYEWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDINJUGA4DSOBVGM. You are receiving this because you authored the thread.Message ID: @.**@.>>

tagliala commented 3 weeks ago

How can I download the CSS with my plan?

Do ytou have a Pro subscription? If you do, feel free to send an email to hello@fontawesome.com to get dedicated support

Anyway, you can download assets at https://fontawesome.com/download

Please also refer to instructions at: https://docs.fontawesome.com/web/setup/host-yourself/webfonts

You also need to copy webfonts together with the css

VARGA-Peter commented 3 weeks ago

Hello, please make sure that Font Awesome is loaded only once.

At the moment, the website loads the CSS and the Kit version, this should be fixed

Where is it load twice? In your screenshot it’s clear that the one link is commented.

So, I repeat myself, the kit breaks Safari on iOS.

tagliala commented 3 weeks ago

At the moment, the website loads the CSS and the Kit version, this should be fixed

Sorry again, you should go for CSS _or_kit. At the moment it appears to only load the CSS, and it works on Safari iOS 18.1

image

So, I repeat myself, the kit breaks Safari on iOS.

If you can provide a reproducible test case, only with the kit (without the css loaded), I will take another look

robmadole commented 3 weeks ago

@VARGA-Peter I tried iOS 17 as well and can't reproduce the issue:

yxRuZbMv@2x

We offer support for Pro account holders if you're interested in that. I'm going to go ahead and close since the original post title is not reproducible.

VARGA-Peter commented 3 weeks ago

Guys, you are indeed very tiresome. You are not using the URL I told you which is the test case. Did you see the Instagram icon isn't shown? You check it in the fixed version. The kit still doesn't work. And, I am definitely not paying for a Pro plan because your product is buggy.

robmadole commented 3 weeks ago

I prepared for you the real page with the broken fonts in Safari. Chrome, FF and other browsers show it correctly. https://skypex.io/awesome - scroll down to the footer.

https://skypex.io/awesome

This is the address I used. Is that not the test case?

Also, the tone in your messages is disrespectful. We are trying to help you, be kind or I will block you.

tagliala commented 3 weeks ago

@robmadole my speculation is that the problem is still present in the homepage, but in the homepage I can still see both the kit and the link to the self-hosted css

I would like to see the kit working alone to provide helpful info

VARGA-Peter commented 3 weeks ago

Guys,

The links are commented. Please have a look. On the HP I am using now the embedded version.

From: Geremia Taglialatela @. Sent: Montag, 04. November 2024 15:42 To: FortAwesome/Font-Awesome @.> Cc: Office [FAF Software] @.>; Mention @.> Subject: Re: [FortAwesome/Font-Awesome] Bug: Icons not shown in Safari (Issue #20401)

@robmadolehttps://github.com/robmadole my speculation is that the problem is still present in the homepage, but in the homepage I can still see both the kit and the link to the self-hosted css

I would like to see the kit working alone to provide helpful info

— Reply to this email directly, view it on GitHubhttps://github.com/FortAwesome/Font-Awesome/issues/20401#issuecomment-2454894685, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ACJN7DWBEWQPB6IPQHMCL3TZ66BS3AVCNFSM6AAAAABRCWKYEWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDINJUHA4TINRYGU. You are receiving this because you were mentioned.Message ID: @.**@.>>

robmadole commented 3 weeks ago

Rl9QaF3l@2x

Your CSS class is incorrect. Try fab fa-instagram or fa-brands fa-instagram.

VARGA-Peter commented 3 weeks ago

Thank you Rob, this worked. However, the point is that embedded version works and kit version doesn’t. In the end, I am happy, it works now. But when you check Internet there are posts which mentioned it’s because of missing integrity hash in the link.

From: Rob Madole @. Sent: Montag, 04. November 2024 16:11 To: FortAwesome/Font-Awesome @.> Cc: Office [FAF Software] @.>; Mention @.> Subject: Re: [FortAwesome/Font-Awesome] Bug: Icons not shown in Safari (Issue #20401)

@.*** (view on web)https://github.com/user-attachments/assets/5f7eb100-8ab4-4f7b-a342-fa522f7759a5

Your CSS class is incorrect. Try fab fa-instagram or fa-brands fa-instagram.

— Reply to this email directly, view it on GitHubhttps://github.com/FortAwesome/Font-Awesome/issues/20401#issuecomment-2454969673, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ACJN7DRWA4QRL2UI5G7KWIDZ6556DAVCNFSM6AAAAABRCWKYEWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDINJUHE3DSNRXGM. You are receiving this because you were mentioned.Message ID: @.**@.>>

robmadole commented 3 weeks ago

But when you check Internet there are posts which mentioned it’s because of missing integrity hash in the link.

What posts specifically?

However, the point is that embedded version works and kit version doesn’t.

Have you re-tested now that you've fixed the root cause?