不从静态加载图标 css（404 错误） Flaticon 和 Font-mfizz

Question

我正在创建一个网站，我需要一个 python 图标，所以我搜索了 Flaticon 有它。

这是我的 HTML 代码：

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <link href="{% static "css/flaticon.css" %}" rel="stylesheet" type="text/css">
    <link href="{% static "css/font-awesome.css" %}" rel="stylesheet" type="text/css">
    <link href="{% static "css/font-mfizz.css" %}" rel="stylesheet" type="text/css">

    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<i class="icon-python" style="font-family: Flaticon, serif"></i>
<i class="icon-python"></i>
<i class="fa-gamepad"></i>
</body>
</html>

我创建了一个不同的 html 只是为了显示这个图标并确保它与我的 HTML 代码中的其他内容无关。

这是我使用 Opera 在本地主机中使用 Django 'python manage.py runserver' 运行的 html 元素检查的控制台：

GET http://xxxxxxxxx:xxxx/static/css/flaticon.cssnet::ERR_ABORTED

GET http://xxxxxxxxx:xxxx/static/css/font-mfizz.cssnet::ERR_ABORTED

当然，该页面只有 Font-Awesome 图标，这与我从主页得到的错误相同。

我正在使用 python，这是我的 Flaticon.css 代码

	/*
  	Flaticon icon font: Flaticon
  	Creation date: 17/03/2018 04:22
  	*/

@font-face {
  font-family: "Flaticon";
  src: url("./Flaticon.eot");
  src: url("./Flaticon.eot?#iefix") format("embedded-opentype"),
       url("./Flaticon.woff") format("woff"),
       url("./Flaticon.ttf") format("truetype"),
       url("./Flaticon.svg#Flaticon") format("svg");
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: "Flaticon";
    src: url("./Flaticon.svg#Flaticon") format("svg");
  }
}

[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {
    font-family: Flaticon, serif;
        font-size: 20px;
font-style: normal;
margin-left: 20px;
}

.flaticon-smart-house:before { content: "\f100"; }
.flaticon-air-conditioner:before { content: "\f101"; }

此外，运行 Django 的 pycharm 在 Flaticon 和 Font-mfizz 上出现 url 错误，而在 Font-Awesome 上不会发生：

Answer 1

您需要提供如下static 文件，' 应该在" 内，反之亦然，以避免混淆。

<link href="{% static 'css/flaticon.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'css/font-awesome.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'css/font-mfizz.css' %}" rel="stylesheet" type="text/css">

然后你要正确看到css文件的目录结构。