Icons not served in django app through amazon S3

Question

I have a Django app with static files served through Amazon S3. All the static files are correctly served (CSS, js, ico, images..) except icons like for example FontAwesome.

The location of those files are correctly set in the source code, and I have no idea how to debug this.

As visible on the picture below, the Content-Type in the metadata is correctly set.

EDIT***

The problem comes from the font-awesome.css file that contains URL links.

@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), 
url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), 
url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), 
url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), 
url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;

}

So I tried the following:

{% load static %}

@font-face {
  font-family: 'FontAwesome';
  src: url('{% static '/fonts/fontawesome-webfont.eot?v=4.7.0' %}');  
  src: url('{% static '/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0' %}') format('embedded-opentype'), 
  url('{% static '/fonts/fontawesome-webfont.woff2?v=4.7.0' %}') format('woff2'), 
  url('{% static '/fonts/fontawesome-webfont.woff?v=4.7.0' %}') format('woff'), 
  url('{% static '/fonts/fontawesome-webfont.ttf?v=4.7.0' %}') format('truetype'), 
  url('{% static '/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular' %}') format('svg');
  font-weight: normal;
  font-style: normal;
}

But in the source code, it is just displayed as in the CSS file, without replacing the {% static %} by its value.

Here is a tree of the project:

EDIT2***

Actually the problem does not come from the ulrs. Even with the proper ulrs pointing to the files on s3.amazonaws, they icons are not displaying.

Example: in my source code I have

<style>
    @font-face {
      font-family: 'icomoon';
      src:  url("https://mybucket.s3.amazonaws.com/static/font/fonts/icomoon.eot");
      src:  url("https://mybucket.s3.amazonaws.com/static/font/fonts/icomoon.eot") format('embedded-opentype'),
        url("https://mybucket.s3.amazonaws.com/static/font/fonts/icomoon.ttf") format('truetype'),
        url("https://mybucket.s3.amazonaws.com/static/font/fonts/icomoon.woff") format('woff'),
        url("https://mybucket.s3.amazonaws.com/static/font/fonts/icomoon.svg") format('svg');
      font-weight: normal;
      font-style: normal;
    }
    
    [class^="icon-"], [class*=" icon-"] {
      /* use !important to prevent issues with browser extensions that change fonts */
      font-family: 'icomoon' !important;
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
    
      /* Better Font Rendering =========== */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
    .icon-noun_visitors:before {
      content: "\e900";
    }


</style>

And clicking on the urls brings to the appropriate files that are downloadable.

But still the icons do not show up on the website. I could use a CDN for FontAwesome but not for my custom icons like the ones above.

We'll need to look at the code where you're trying to serve the static files. — joshlsullivan, Oct 07 '18 at 21:38
I edited my answer, the problem comes from urls inside the font-awesome.css — michltm, Oct 08 '18 at 15:04
Inside the static folder, create another folder that is the name of your app and move everything in there. Then update your URL to ```{% static 'app-name/font/...' %}```. Let me know if that works. — joshlsullivan, Oct 08 '18 at 16:41
well I finally found out that the problem was due to Amazon S3 CORS, and could solve the problem with this post: https://stackoverflow.com/questions/12229844/amazon-s3-cors-cross-origin-resource-sharing-and-firefox-cross-domain-font-loa — michltm, Oct 22 '18 at 13:25

Icons not served in django app through amazon S3

0 Answers0