Summernote Icons not showing using django-summernote

Question

(Note: Issue resolved, see update below)

I am using django-summernote and its icons aren't loading. I have followed multiple suggestions on other stack posts (like this one ), and tried suggestions on github , including hard-coding CDN links to summernote's CSS, and I have tried modifying the @font-face css with A) urls to local font files, and B) hard coded urls to the fonts in my static storage, none of which worked. I also tried pulling the CSS files (unminified) directly into my page in <script> tags, also with no luck.

I'm using digital ocean spaces to serve static files (which follows the AWS S3 api standards, if relevant), and I can verify they're loading, as shown in the image. The directory and each asset are designated public.

Furthermore, font-awesome is already used throughout my app (version 6). I've tried rolling back to previous versions of FA, which also did not work. From other posts, it seems summernote gets FA icons somehow, but I'm not sure how. If anyone has any insight into this issue, I'd appreciate it. Here's how it looks now, on Chrome and other browsers:

Short of writing a script to replace summernote's icons with something that works, I'm not sure what to try next.

UPDATE:

It looks like the fonts for summernote are blocked by CORS policy. The solution was to add a CORS policy in Digital Ocean spaces for 'Access-Control-Allow-Origin'. I was initially thrown thinking the issue was in my app. Everything working fine now.

Answer 1

I solved this error by following next steps:

1- In AWS go to S3 buckets

2- press on the bucket name

3- go to the bottom of the page and edit "Cross-origin resource sharing (CORS)"

4- add the following code and save changes:

[
    {
        "AllowedHeaders": [
            "Authorization"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    },
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD",
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "ETag",
            "x-amz-meta-custom-header"
        ]
    }
]