Иконки, которые не отображаются в приложении Django через Amazon S3 - PullRequest
Новая
       6

Иконки, которые не отображаются в приложении Django через Amazon S3

0 голосов
/ 06 октября 2018

У меня есть приложение Django со статическими файлами, которые обслуживаются через Amazon S3.Все статические файлы корректно обслуживаются (CSS, js, ico, images ...), за исключением значков, таких как, например, FontAwesome.

Расположение этих файлов правильно задано в исходном коде, и я не знаю, как это отладить.

Как видно на рисунке ниже, Content-Type в метаданныхправильно установлен.

enter image description here

РЕДАКТИРОВАТЬ ***

Проблема связана с файлом font-awesome.css, содержащим URL-ссылки.

@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%} по значению.

Вот дерево проекта:

enter image description here

EDIT2 ***

На самом деле проблема неродом из язвДаже при правильных 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, но не для своих пользовательских значков, подобных приведенным выше.

...