TimelineJS圖標在哪裏？

我正在寫一個web應用程序，它將顯示來自DBPedia的數據。網站上會有一個時間表（TimelineJS）。我決定下載bootstrap和timelinejs的最新文件CSS和JS。當我去創建的網站時，它仍然缺少時間線上的一些圖標。我的控制檯日誌：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錯誤地假定的。我無法找到任何設置圖像路徑的選項，也找不到要下載的圖標。

在我切換到下載引導程序和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

從哪裏可以獲得這些圖標？

編輯＃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>

來源

2015-11-24 Zelphir

在切換到本地之前，您使用了什麼CDN？ –

@JacquesMarais編輯我的帖子以包含基本模板，以便您可以看到CDN。註釋掉的是我以前用過的，除了timeline.js，我已經切換回去了，但沒有幫助。 – Zelphir

我發現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/'具有以下文件名：

只要下載所有這些文件，創建app/static/css下的目錄名爲icons和所有這些文件給它。

來源

2015-11-24 12:34:32

是的，這有助於解決問題。被迫搞亂我的目錄結構是不好的，但至少我現在得到了圖標。也許我會在css文件中改變這個路徑是合適的。 – Zelphir

@Zelphir您可以將所有文件添加到'app/static/fonts'目錄並更改CSS以查找其中的文件，因爲它是字體。 –

TimelineJS圖標在哪裏？

回答

相關問題