Cloudfront CDN and icon not appearing

I recently enable Amazon Cloudfront CDN on my site and it itself works well, but this problem started appearing where my icons, such as arrows and search, no longer appeared but were instead boxes. I have done a lot of research trying to find how to fix it but nothing has worked so far.

On my console I get this message:
Access to font at 'https://d3arpqwmll8lee.cloudfront.net/wp-content/plugins/w3-total-cache/pub/fonts/w3tc.woff' from origin 'https://abadventures.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
so I think I know what the issue is, but my .htaccess file in my public directory already has the code:

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>

so I’m not sure if it is in the wrong spot or if it is something else.

I have also tried to prevent the CDN from loading the files that the font styles are by restricting access to those specific files, but it does not seem to change anything. Any help would be appreciated. Thank you!

• This topic was modified 6 years ago by abadventures.
• This topic was modified 6 years ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic

The page I need help with: [log in to see the link]