Wagtail admin icons disappear when running collectstatic and putting everything on S3

Question

I've been working locally and on my server and everything looks good. Then I configure django-storages to store static files and media on my S3 bucket. Everything works except for the icons/glyphicons on the admin interface. Instead of the nice pretty graphic icons, I see letters.

For example once you log in, you have the search bar on the left side. Normally you would see a looking glass in the search box. I lost the looking glass and now I just see a lowercase f.

My question is this. What do I search for to start debugging this? What wagtail file is collectstatic not collecting?

Steps to Reproduce

1. Set up a wagtail site
2. Set up a bucket on s3
3. Install django-storages
4. Configure django-storages to use your bucket
5. ./manage.py collectstatic

Technical details

• Python version: 3.5.2
• Django version: 1.11.5
• Wagtail version: 1.12.2
• Browser version: firefox, chromium, chrome

Answer 1

This happens because Wagtail uses an icon font, and current browsers don't allow loading fonts from remote domains unless they include valid CORS HTTP headers. You can configure the django-storages S3 backend to add the appropriate headers by adding the following lines to your settings file:

AWS_HEADERS = {
    'Access-Control-Allow-Origin': '*'
}

and re-running ./manage.py collectstatic. See https://github.com/wagtail/wagtail/issues/633#issuecomment-55935529 for some additional notes.

Answer 2

I ran into this issue too. Since v1.9 of django-storages, it has used boto3 instead of boto. The "AWS_HEADERS" fix by gasman does not work for boto3. However, setting these CORS rules in Amazon S3, which I found here, resolved the issue for me:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

As mentioned in the linked github response, it's probably best to update

<AllowedOrigin>*</AllowedOrigin>

to

<AllowedOrigin>http://www.example.com</AllowedOrigin>

Here is the Amazon documentation for CORS settings.