Question

    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>  
                  <script type="text/javascript" src="js/jquery.dataTables.min.js">     </script>
                  <script type="text/javascript" src="js/dataTables.bootstrap.js"></script>
                  <style>
                      body { font-size: 100%; }

     table.dataTable thead th {
        position: relative;
        background-image: none !important;
    }
    table.dataTable thead th.sorting:after,
    table.dataTable thead th.sorting_asc:after,
    table.dataTable thead th.sorting_desc:after {
        position: absolute;
        top: 12px;
        right: 8px;
        display: block;
        font-family: FontAwesome;
    }
    table.dataTable thead th.sorting:after {
        content: "\f0dc";
        color: violet;
        font-size: 0.8em;
        padding-top: 0.12em;
    }
    table.dataTable thead th.sorting_asc:after {
        content: "\f0de";
    }
    table.dataTable thead th.sorting_desc:after {
        content: "\f0dd";
    }
                  </style>
                  <link href="css/font-awesome.css" rel="stylesheet" type="text/css"/>

                  <link href="css/bootstrap.min_1.css" rel="stylesheet" type="text/css"/>
                  <link href="css/dataTables.bootstrap.css" rel="stylesheet" type="text/css"/>
                  <script>
                       $(document).ready(function() {
                       $('#example').dataTable();
                  </script>
    </head>
    <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
// table data
            </tbody>
        </table>

我正在使用工作正常的数据表，标题排序图标也正常工作，但它们看起来并不像字体太棒了。

它们看起来像小方块（铬合金空白）

从这里阅读有关字体真棒样式表的内容： http://www.datatables.net/blog/2014-06-06#Comments

Answer 1

也遇到了这个问题......

修改 dataTables.bootstrap.css

注释掉所有排序图标

table.dataTable thead .sorting:after {
    opacity: 0.2;
    /*content: "\e150"; /* sort */*/
}
table.dataTable thead .sorting_asc:after {
    /*content: "\e165";  sort-by-attributes */
}
table.dataTable thead .sorting_desc:after {
    /*content: "\e156";  sort-by-attributes-alt */
}

在正文结束标记

之前添加此css

记得指向你的绝对路径图标

<style>
table.dataTable thead .sorting { background: url(/ui/adminLTE/plugins/datatables/images/sort_both.png) no-repeat center right; }
table.dataTable thead .sorting_asc { background: url(/ui/adminLTE/plugins/datatables/images/sort_asc.png) no-repeat center right; }
table.dataTable thead .sorting_desc { background: url(/ui/adminLTE/plugins/datatables/images/sort_desc.png) no-repeat center right; }

table.dataTable thead .sorting_asc_disabled { background: url(/ui/adminLTE/plugins/datatables/images/sort_asc_disabled.png) no-repeat center right; }
table.dataTable thead .sorting_desc_disabled { background: url(/ui/adminLTE/plugins/datatables/images/sort_desc_disabled.png) no-repeat center right; }

finally

bootstrap 3个数据表显示方形标题排序图标而不是字体真棒图标

1 个答案: