2016-06-24 68 views
0

我試圖使用FooTable作爲獨立版本。我複製/粘貼this示例的代碼,幷包含jQuery.js,fontawesome.css和footable js/css。FooTable:切換圖標丟失?

example page頁面上,您會看到一旦隱藏了列,就會出現切換加號圖標。但是,在我的示例副本中,沒有切換圖標出現。我錯過了什麼嗎?


編輯我只是檢查Windows 7的計算機上,並與Ubuntu不同的設備上的同一個文件。在這兩個圖標上都沒有出現。


這是我的例子的外觀:

enter image description here

這裏是我的代碼:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>title</title> 
    <link rel="stylesheet" href="style.css"> 
    <!-- FontAwesome--> 
    <link rel="stylesheet" href="/resources/vendor/font-awesome/css/font-awesome.min.css"> 
    <ling rel="stylesheet" href="css/footable.standalone.css"> 

     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
     <script>window.jQuery || document.write('<script src="/resources/vendor/jQUery/jquery-1.11.2.min.js"><\/script>')</script> 

    <script src="js/footable.min.js"></script> 

    </head> 
    <body>Check if fontawesome is loaded: <i class="fa fa-plus" aria-hidden="true"></i> 

    <table class="table"> 
    <thead> 
     <tr> 
      <th data-breakpoints="xs">ID</th> 
      <th>First Name</th> 
      <th>Last Name</th> 
      <th data-breakpoints="xs">Job Title</th> 
      <th data-breakpoints="xs sm">Started On</th> 
      <th data-breakpoints="xs sm md" data-title="DOB">Date of Birth</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr > 
      <td>1</td> 
      <td>Dennise</td> 
      <td>Fuhrman</td> 
      <td>High School History Teacher</td> 
      <td>November 8th 2011</td> 
      <td>July 25th 1960</td> 
     </tr> 
     <tr> 
      <td>2</td> 
      <td>Elodia</td> 
      <td>Weisz</td> 
      <td>Wallpaperer Helper</td> 
      <td>October 15th 2010</td> 
      <td>March 30th 1982</td> 
     </tr> 
     <tr> 
      <td>3</td> 
      <td>Raeann</td> 
      <td>Haner</td> 
      <td>Internal Medicine Nurse Practitioner</td> 
      <td>November 28th 2013</td> 
      <td>February 26th 1966</td> 
     </tr> 
     <tr> 
      <td>4</td> 
      <td>Junie</td> 
      <td>Landa</td> 
      <td>Offbearer</td> 
      <td>October 31st 2010</td> 
      <td>March 29th 1966</td> 
     </tr> 
     <tr> 
      <td>5</td> 
      <td>Solomon</td> 
      <td>Bittinger</td> 
      <td>Roller Skater</td> 
      <td>December 29th 2011</td> 
      <td>September 22nd 1964</td> 
     </tr> 
     <tr> 
      <td>6</td> 
      <td>Bar</td> 
      <td>Lewis</td> 
      <td>Clown</td> 
      <td>November 12th 2012</td> 
      <td>August 4th 1991</td> 
     </tr> 
     <tr> 
      <td>7</td> 
      <td>Usha</td> 
      <td>Leak</td> 
      <td>Ships Electronic Warfare Officer</td> 
      <td>August 14th 2012</td> 
      <td>November 20th 1979</td> 
     </tr> 
     <tr> 
      <td>8</td> 
      <td>Lorriane</td> 
      <td>Cooke</td> 
      <td>Technical Services Librarian</td> 
      <td>September 21st 2010</td> 
      <td>April 7th 1969</td> 
     </tr> 
    </tbody> 
</table> 

<script> 
jQuery(function($){ 
    $('.table').footable(); 

}); 
</script> 
    </body> 
</html> 

回答

1

確保,字體真棒字體的路徑可供選擇, 一般font-awesome.css試圖找到

../fonts/*.eof|woff

所以一定要確保這個路徑是從您的網頁,或使用字體真棒CDN鏈接訪問

https://www.bootstrapcdn.com/fontawesome/

+0

還要檢查瀏覽器開發工具網絡選項卡,以確認字體不是404 –

+0

在我的示例代碼中,我還添加了一個字體真棒圖標來檢查它是否工作,它確實顯示了字體真棒圖標。在網絡選項卡中,它顯示'Status:304 not modified' for font-awesome.css。這是問題嗎? – Adam

+0

它應該顯示爲font-awesome.woff,font-awesome.eot文件檢查網絡選項卡內的字體選項卡 –

0

之所以沒有顯示的圖標是因爲footable.min.css WASN不包括在內。這是因爲我寫的

<ling rel="stylesheet" href="css/footable.standalone.css">

代替

<link rel="stylesheet" href="css/footable.standalone.css">

0

字體應該是在正確的道路: ../fonts/glyphicons-halflings..*