我正在编写一个Web应用程序,它将显示来自DBPedia的数据。网站上会有时间轴(TimelineJS
)。我决定下载CSS
和JS
的最新bootstrap
和timelinejs
文件。当我转到创建的网站时,它仍然缺少时间轴的一些图标。我的控制台日志:
GET http://localhost:5000/static/css/icons/tl-icons.woff [HTTP/1.0 404 NOT FOUND 3ms]
NetworkError: A network error occurred. <unknown>
downloadable font: download failed (font-family: "tl-icons" style:normal weight:normal stretch:normal src index:2): status=2147746065 source: http://localhost:5000/static/css/icons/tl-icons.woff timeline.css:27:7175
对我来说,似乎timelinejs缺少图标,它试图在错误的位置找到这些图标,这些图标也不在我的应用程序目录中。我不知道为什么会有人将css文件放入与
img
文件夹相同的目录中,但是看来,这是timelinejs错误地假设的。我找不到设置图像路径的任何选项,也找不到要下载的图标。在我切换到bootstrap和timelinejs的css和js版本下载之前,这些图标在网站上没有出现问题。由于网络延迟,我想继续使用本地的CSS和JS文件。
我在timelinejs网站上或在其文档页面上都找不到下载链接:
TimelineJS Documentation
Timeline FAQ
这是应用程序静态文件夹的结构和内容:
app/static/
app/static/css
app/static/css/general.css
app/static/css/bootstrap.min.css
app/static/css/bootstrap-theme.min.css
app/static/css/timeline.css
app/static/json
app/static/json/minimal_example.json
app/static/fonts
app/static/fonts/glyphicons-halflings-regular.eot
app/static/fonts/glyphicons-halflings-regular.svg
app/static/fonts/glyphicons-halflings-regular.woff
app/static/fonts/glyphicons-halflings-regular.woff2
app/static/fonts/glyphicons-halflings-regular.ttf
app/static/img
app/static/img/github-icon.png
app/static/img/DBpediaLogo.svg
app/static/img/wiki.png
app/static/img/pacman_loader.gif
app/static/js
app/static/js/timeline.js
app/static/js/my_timeline.js
app/static/js/bootstrap.min.js
app/static/js/npm.js
app/static/js/jquery-2.1.4.js
我从哪里可以得到那些图标?
EDIT#1 :(我的
base.j2
模板的内容)<!DOCTYPE html>
<html lang="en">
<head>
{% if title %}
<title>{{ title }} - microblog</title>
{% else %}
<title>DBPedia - Die Hadoopianer</title>
{% endif %}
<meta charset="utf-8">
<meta name="author" content="{% for author in authors %}{{author}}, {% endfor %}">
<meta name="description" content="A website showing data from DBPedia">
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- to ensure proper rendering on mobile devices -->
<!-- <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" /> -->
<!-- <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css" /> -->
<link rel="stylesheet" type="text/css" href="static/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="static/css/bootstrap-theme.min.css" />
<!-- <link rel="stylesheet" type="text/css" href="https://cdn.knightlab.com/libs/timeline3/latest/css/timeline.css" /> -->
<link rel="stylesheet" type="text/css" href="static/css/timeline.css" />
<link rel="stylesheet" type="text/css" href="static/css/general.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.js"></script>
<!-- <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/latest/js/bootstrap.min.js"></script> -->
<script type="text/javascript" src="static/js/bootstrap.min.js"></script>
<!--
Javascript module for the timeline
-->
<script type="text/javascript" src="https://cdn.knightlab.com/libs/timeline3/latest/js/timeline.js"></script>
<!-- <script type="text/javascript" src="static/js/timeline.js"></script> -->
<script type="text/javascript" src="static/js/my_timeline.js"></script>
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
最佳答案
我在the CDN's CSS file中找到了一行:
@font-face{font-family:tl-icons;src:url(icons/tl-icons.eot);src:url(icons/tl-icons.eot?#iefix) format('embedded-opentype'),url(icons/tl-icons.ttf) format('truetype'),url(icons/tl-icons.woff) format('woff'),url(icons/tl-icons.svg#tl-icons) format('svg');font-weight:400;font-style:normal}
据此,这些文件都可以在目录“ https://cdn.knightlab.com/libs/timeline3/latest/css/icons/”中以下列文件名使用:
tl-icons.eot
tl-icons.ttf
tl-icons.woff
tl-icons.svg
只需下载所有这些文件,在
app/static/css
下创建一个名为icons
的目录,并将所有这些文件都保存到该目录中。关于javascript - TimelineJS图标在哪里?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/33893504/