我试图使用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文件检查网络选项卡内的字体选项卡 –