'Summernote Icons not showing using django-summernote

(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 F-A, which also did not work. From other posts, it seems summernote gets F-A 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.

django summernote

Solution 1:^[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"
        ]
    }
]

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Ahmad Kahil

'Summernote Icons not showing using django-summernote

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]