Public CDN returning 403 for most default icons, 200 for one

[dorrzun]

Describe the bug

TL;DRL: 403 + CloudFlare cf-cache-status: BYPASS for most of the default icons seen in and potentially others. Cow gives 200, but has cf-cache-status: HIT.

When following the instructions installation via CDN, I'm receiving 403s for many of the default FontAwesome icons. CodePen also encounters the same behavior.

I'm running my page from a local server, verified issue on Chrome and Firefox (latest versions) and already handled CORS for:

1. https://ka-f.webawesome.com
2. https://ka-f.fontawesome.com
3. https://kit.webawesome.com

Screenshots

Browser / OS

• OS: Windows
• Browser: Chrome/Firefox
• Browser version: Latest

[claviska]

The 403s appear to be pro icons. The only Font Awesome free icon in that list is cow (I'm assuming circle-info.svg is a non-free variant, but I can't see the icon family/variant in the HTML to confirm.)

Are you a Font Awesome pro user? If so, adding your Kit Code as described here will unlock FA Pro.

<!-- Option 1: the data-fa-kit-code attribute -->
<script src="bundle.js" data-fa-kit-code="abc123"></script>

<!-- Option 2: the setKitCode() method -->
<script type="module">
  import { setKitCode } from 'https://ka-f.webawesome.com/webawesome@3.5.0/webawesome.loader.js';
  setKitCode('YOUR_KIT_CODE_HERE');
</script>

[dorrzun]

Thank you for both helping relocate this to a discussion and for such quick clarification!

I'm a very new user, but assumed that the examples could be copied "as is" without needing to customize or set anything else beyond a theme on the html tag. (circle-info.svg is the icon used in the example for callout)

Overall, it doesn't seem like this requirement for pro icons is communicated, so what can I do to improve this? 😊

[claviska]

Great question. I'd like to make this smarter but we don't have a manifest to determine which icons are free and which are pro. Perhaps we could look for 403 responses from the free CDN and log a console warning 🤔

[dorrzun]

This sounds like a nice first issue that I can poke at! Will link a draft PR when possible.

Does this raise a similar question about what icons should be used in the example docs? I don't know the backstory behind using Pro icons, but they look preferable.

[claviska]

Draft PR here, but we may need to tweak the heuristics. #2292