Where are the TimelineJS icons?

Question

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:

TimelineJS Documentation

Timeline FAQ

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>

@JacquesMarais Edited my post to contain the base template, so that you can see the CDNs. The commented out ones are the ones I used before, except the timeline.js, which I already switched back, but it didn't help. — Zelphir Kaltstahl, Nov 24 '15 at 12:23

Jacques Marais · Accepted Answer · 2015-11-24T12:42:13.003

2

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.

edited Nov 24 '15 at 12:42

answered Nov 24 '15 at 12:34

Jacques Marais

2,666
14
33

Yes, that helped and resolved the issue. It's not nice to be forced to mess up my directory structure, but at least I got the icons now. Maybe I'll change that path in the css file to be something appropriate. – Zelphir Kaltstahl Nov 24 '15 at 12:42
1

@Zelphir You could add all the files to the `app/static/fonts` directory and change the CSS to find the files there, as it is fonts. – Jacques Marais Nov 24 '15 at 12:44

Where are the TimelineJS icons?

1 Answers1