Font Awesome 4.7 Icons Not Showing in Django S3 Project

Question

Font Awesome 4.7 icons are showing squares in my Django project when using Amazon S3.

Question I'm trying to answer is: Why is my CSS working but not my Font Awesome icons?

---

Locally, when DEBUG = True

The Font Awesome Icons work:

When I set DEBUG = False:

My settings.py uses Amazon S3 bucket settings:

if DEBUG:
    STATIC_URL = '/static/'
    STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), 'static_cdn')
    STATICFILES_DIRS = [
        os.path.join(BASE_DIR, 'static')
    ]

    MEDIA_URL = '/media/'
    MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR), 'media_cdn')
else:
    AWS_ACCESS_KEY_ID = os.environ['AWS_ACCESS_KEY_ID']
    AWS_SECRET_ACCESS_KEY = os.environ['AWS_SECRET_ACCESS_KEY']

    AWS_FILE_EXPIRE = 200
    AWS_PRELOAD_METADATA = True
    AWS_QUERYSTRING_AUTH = True

    DEFAULT_FILE_STORAGE = 'helloworld.storage_utils.MediaRootS3BotoStorage'
    STATICFILES_STORAGE = 'helloworld.storage_utils.StaticRootS3BotoStorage'

    AWS_STORAGE_BUCKET_NAME = os.environ['AWS_STORAGE_BUCKET_NAME']
    S3DIRECT_REGION = 'us-west-2'
    S3_URL = '//%s.s3.amazonaws.com/' % AWS_STORAGE_BUCKET_NAME
    MEDIA_URL = '//%s.s3.amazonaws.com/media/' % AWS_STORAGE_BUCKET_NAME
    MEDIA_ROOT = MEDIA_URL
    STATIC_URL = S3_URL + 'static/'
    ADMIN_MEDIA_PREFIX = STATIC_URL + 'admin/'

    STATICFILES_DIRS = [
        os.path.join(BASE_DIR, 'static')
    ]

    import datetime

    two_months = datetime.timedelta(days=61)
    date_two_months_later = datetime.date.today() + two_months
    expires = date_two_months_later.strftime("%A, %d %B %Y 20:00:00 GMT")

    AWS_HEADERS = {
        'Expires': expires,
        'Cache-Control': 'max-age=%d' % (int(two_months.total_seconds()),),
    }

Font Awesome 4.7 icons don't work (shows squares):

In my S3 bucket, I have my CSS directory setup the same as locally:

I also have the fonts directory setup (same as locally)

When referencing the files in my templates, I'm using:

<!-- Font awesome -->
  <link rel="stylesheet" href="{% static 'helloworld/css/font-awesome.min.css' %}">

The rendered HTML on the rendered page is

<link rel="stylesheet" href="https://helloworldbucket939384.s3.amazonaws.com/static/helloworld/css/font-awesome.min.css?AWSAccessKeyId=AKIASGAGAKANCPZIIB4B&amp;Signature=47QKoudsrtfjFUm8UAIA8sjg1Ck%3D&amp;Expires=1576786765">

Answer 1

I simply added this line under all my JS imports and it works for me:

<script src="https://kit.fontawesome.com/e81d17d39f.js" crossorigin="anonymous"></script>