I am writing a web appplication, which will display data from DBPedia. There will be a timeline (TimelineJS) on the website. I decided to download the latest CSS and JS files of bootstrap and timelinejs. When I go to the created website, it's still missing some icons for the timeline. My console logs:
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
To me it seems that timelinejs is missing icons, which it tries to find at the wrong location, which also don't exist in my app's directory yet. I don't know why anyone would put the css file into the same directory as the img folder, but it appears, that this is what timelinejs mistakenly assumes. I could not find any option to set the images path, nor could I find the icons to download.
Before I switched to downloaded css and js versions of bootstrap and timelinejs, the icons where rendered without problems on the website. Because of network delay, I'd like to keep using local css and js files.
I couldn't find the download link on the timelinejs website, nor on their documentation pages:
This is the structure and the content of my static folder of the app:
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
Where can I get those icons from?
EDIT#1: (Content of my base.j2 template)
<!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>
I found a line in 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}
According to that, the files are all available at the directory 'https://cdn.knightlab.com/libs/timeline3/latest/css/icons/' with the following filenames:
Just download all those files, create a directory under app/static/csscalled icons and all those files to it.
