【问题标题】:FooTable: Toggle icon is missing?FooTable:缺少切换图标?
【发布时间】:2018-03-02 19:45:24
【问题描述】:

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

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>

【问题讨论】:

    标签: jquery css footable


    【解决方案1】:

    确保 font-awesome 字体的路径可用, 通常 font-awesome.css 会尝试在

    处查找字体

    ../fonts/*.eof|woff

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

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

    【讨论】:

    • 同时检查浏览器开发工具网络选项卡以确认字体不是 404
    • 在我的示例代码中,我还添加了一个很棒的字体图标来检查它是否有效,它确实正确地显示了字体很棒的图标。在网络选项卡中,它显示Status: 304 not modifiedfor font-awesome.css。是这个问题吗?
    • 它应该显示 font-awesome.woff、font-awesome.eot 文件检查网络选项卡内的字体选项卡
    • 嗯,字体选项卡在两种情况下都是空的:如果我包含我的本地 fontawesome.css 或您建议的 font-awesome cdn 链接。
    【解决方案2】:

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

    &lt;ling rel="stylesheet" href="css/footable.standalone.css"&gt;

    而不是

    &lt;link rel="stylesheet" href="css/footable.standalone.css"&gt;

    【讨论】:

      【解决方案3】:

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

      【讨论】:

        猜你喜欢
        • 2020-12-29
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2018-08-31
        • 1970-01-01
        • 1970-01-01
        • 2019-10-06
        • 2017-11-17
        相关资源
        最近更新 更多