字体真棒4.7图标没有显示在Django S3项目

xmakbtuz  于 2023-02-05  发布在  Go
关注(0)|答案(2)|浏览(127)

Font Awesome 4.7图标在我的Django项目中使用Amazon S3时显示方形。

我想回答的问题是:为什么我的CSS可以工作,但Font Awesome图标却不行?
当DEBUG = True时,在本地执行

Font Awesome图标工作:

当我设置DEBUG = False时:

我的settings.py使用Amazon S3存储桶设置:

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图标不起作用(显示方块):

在我的S3存储桶中,我的CSS目录设置与本地相同:

我还设置了字体目录(与本地设置相同)

引用模板中的文件时,我使用:

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

呈现页面上呈现的HTML是

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

qco9c6ql1#

我只是在所有的JS导入下添加了这一行,它对我很有效:

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

whitzsjs2#

我也有同样的问题。就我而言,我...

  • 进入正在运行的Docker容器
  • 通过以下方式安装nano:*APK添加纳米 *
  • 使用上面的行编辑了jazzmin的base.html

之前我曾尝试编辑“fontawesome-free/css/all.min.css”但没有成功。
编辑 *
原来我的“跨产地资源共享(CORS)”没有必要的方法。

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "HEAD",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

相关问题