django - 通过 amazon S3 在 django 应用程序中未提供图标

Question

我有一个 Django 应用程序，其中包含通过 Amazon S3 提供的静态文件。除了诸如 FontAwesome 之类的图标之外，所有静态文件都已正确提供（CSS、js、ico、图像..）。

这些文件的位置在源代码中正确设置，我不知道如何调试它。

如下图所示，元数据中的 Content-Type 设置正确。

编辑***

问题来自包含 URL 链接的 font-awesome.css 文件。

@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;

}

所以我尝试了以下方法：

{% 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;
}

但在源代码中，它只是在 CSS 文件中显示，没有用它的值替换 {% static %}。

这是项目的树：

编辑2***

实际上问题不是来自 ulrs。即使正确的 ulrs 指向 s3.amazonaws 上的文件，它们的图标也不会显示。

示例：在我的源代码中，我有

<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>

并且单击 url 会带来可下载的相应文件。

但是这些图标仍然没有显示在网站上。我可以将 CDN 用于 FontAwesome，但不能用于上面的自定义图标。

标签： djangoamazon-web-servicesamazon-s3font-awesome