我試圖使用FooTable作爲獨立版本。我複製/粘貼this示例的代碼,幷包含jQuery.js,fontawesome.css和footable js/css。FooTable:切換圖標丟失?
在example page頁面上,您會看到一旦隱藏了列,就會出現切換加號圖標。但是,在我的示例副本中,沒有切換圖標出現。我錯過了什麼嗎?
編輯我只是檢查Windows 7的計算機上,並與Ubuntu不同的設備上的同一個文件。在這兩個圖標上都沒有出現。
這是我的例子的外觀:
這裏是我的代碼:
<!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>
還要檢查瀏覽器開發工具網絡選項卡,以確認字體不是404 –
在我的示例代碼中,我還添加了一個字體真棒圖標來檢查它是否工作,它確實顯示了字體真棒圖標。在網絡選項卡中,它顯示'Status:304 not modified' for font-awesome.css。這是問題嗎? – Adam
它應該顯示爲font-awesome.woff,font-awesome.eot文件檢查網絡選項卡內的字體選項卡 –