FooTable：缺少切换图标？

问题描述 投票：0回答：3

我正在尝试使用FooTable作为独立版本。我复制/粘贴this示例的代码，包括jQuery.js，fontawesome.css和footable js / css。

在qazxsw poi页面上，您会看到一旦隐藏列，就会出现一个切换加图标。但是，在我的示例副本中，没有出现切换图标。我错过了什么吗？

编辑我只是在Windows 7计算机上和使用Ubuntu的其他设备上检查相同的文件。在这两个图标上都没有出现。

这就是我的例子：

example page

这是我的代码：

enter image description here
jquery css footable
3个回答
1
投票

确保，font-awesome字体的路径是可用的，通常font-awesome.css尝试查找字体

<!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>

所以请确保可以从您的网页访问此路径，或使用font-awesome cdn链接

../fonts/*.eof|woff

0
投票

未显示图标的原因是因为未包含footable.min.css。这是因为我写道

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

代替

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

0
投票

字体应该在正确的路径：../fonts/glyphicons-halflings..*

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.