Question

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

这是我的HTML代码：

＆＃13;

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

＆＃13;

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

这是我用Django＆＃39; python manage.py runserver＆＃39;运行的html元素检查的控制台。在我的localhost中使用Opera：

获取http://xxxxxxxxx:xxxx/static/css/flaticon.css net :: ERR_ABORTED

获取http://xxxxxxxxx:xxxx/static/css/font-mfizz.css net :: ERR_ABORTED

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

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

＆＃13;

	/*
  	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"; }

＆＃13;

另外，运行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文件你必须正确地看到目录结构。

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

1 个答案: