缺少 bootstrap table 图标

Question

我正在使用 Bootstrap 和 Bootstrap-table，但无法显示图标。我已经仔细检查以确保我的版本是正确的，但是不管 table 顶部是否显示用于打印、排序等的图标。当我将代码复制到 bootstrap-table 在线编辑器时，多重排序显示但不显示其他按钮。这种现象与平台无关（发生在 chrome、firefox 和 safari 中）。

问题（注意缺少图标）

我应该看到的

我的HTMLHeader

<!DOCTYPE html>
<html lang='en'>
<head>
    <title>UDP18131: Geminizer v2.0</title>

    <!--Required meta tags-->
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--Style sheets-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

    <!--JQUERY-->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>

    <!--BOOTSTRAP-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

    <!--BOOTSTRAP TABLE EXTENSIONS-->
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.2/dist/bootstrap-table.min.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.2/dist/extensions/reorder-rows/bootstrap-table-reorder-rows.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/TableDnD/1.0.3/jquery.tablednd.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.18.2/dist/bootstrap-table.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.18.2/dist/extensions/filter-control/bootstrap-table-filter-control.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.18.2/dist/extensions/multiple-sort/bootstrap-table-multiple-sort.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.18.2/dist/extensions/reorder-rows/bootstrap-table-reorder-rows.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.18.2/dist/extensions/print/bootstrap-table-print.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.18.2/dist/extensions/key-events/bootstrap-table-key-events.min.js"></script>       
</head>

我的Body

<!--Variant Table Section-->
<p>
<button class="btn btn-lg btn-block active" type="button" data-toggle="collapse" data-target="#varianttable" style="background-color:#84AF3C" aria-expanded="true" aria-controls="varianttable" >Variants Table</button>
<div class="row">
    <div class="collapse multi-collapse" id="varianttable">
        <div class="card card-body"  style='width: 1500px'>
            <table id="varTable" class="table table-striped table-condensed table-hover table-sm table-responsive-sm mx-auto" data-show-button-icons="true" data-buttons-prefix="btn-sm btn" style='width: 75%; margin-left: 2%; margin-right: 2%' data-toggle="varTable" data-show-columns="true" data-pagination="true" data-pagination-pre-text="Previous" data-pagination-next-text="Next" data-page-list="[10, 25, 50, 100, all]" data-filter-control="true" data-show-search-clear-button="true" data-show-multi-sort="true" data-sort-priority='[{"sortName":"basic.chr"},{"sortName":"basic.pos"}]' data-use-row-attr-func="true" data-reorderable-rows="true" data-show-print="true">
                <thead>
                    <tr>
                        <th colspan="10">Basic</th>
                        <th colspan="4">Biological</th>
                    </tr>
                    <tr>
                        <th data-field="basic.row.na" data-sortable="true" data-switchable="false" data-width="10">ID</th>
                        <th data-field="basic.source.na" data-sortable="true" data-filter-control="input">Inheritance/Source</th>
                        <th data-field="basic.gene.na" data-sortable="true" data-filter-control="input" data-width="20">Gene</th>
                        <th data-field="basic.chr.na" data-sortable="true" data-filter-control="select" data-width="20">Chr</th>
                        <th data-field="basic.pos.na" data-sortable="true">Pos</th>
                        <th data-field="basic.ref.na" data-sortable="true" data-width="20">Ref</th>
                        <th data-field="basic.alt.na" data-sortable="true" data-width="20">Alt</th>
                        <th data-field="basic.trans.na" data-sortable="true" data-width="20">Transcript</th>
                        <th data-field="basic.hgvsc.na" data-sortable="true" data-visible="false" data-width="20">C Nomen</th>
                        <th data-field="basic.hgvsp.na" data-sortable="true" data-visible="false" data-width="20">P Nomen</th>
                        <th data-field="bio.type.na" data-sortable="true" data-filter-control="input" data-width="20">Type:Sub Type</th>
                        <th data-field="bio.biotype.na" data-sortable="true" data-visible="false" data-filter-control="input" data-width="20">Biotype</th>
                        <th data-field="bio.impact.na" data-sortable="true" data-filter-control="input" data-width="20">Impact</th>
                        <th data-field="bio.aachange.na" data-sortable="true" data-visible="false" data-width="20">AA Change</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

还有我的脚本部分

    var $table = $('#varTable');
    $(function() {

        var varData = [{'basic.row.na':"1",'basic.source.na':"HGMD",'basic.gene.na':"EXO5",'basic.chr.na':"1",'basic.pos.na':"40514996",'basic.ref.na':"T",'basic.alt.na':"C",'basic.trans.na':"NM_001346946.1",'basic.hgvsc.na':"NM_001346946.1:c.452T>C",'basic.hgvsp.na':"NP_001333875.1:p.Leu151Pro",'bio.type.na':"snp: ts",'bio.biotype.na':"protein_coding",'bio.impact.na':".",'bio.aachange.na':"L/P"},{'basic.row.na':"2",'basic.source.na':"HGMD;CLINVAR",'basic.gene.na':"FLG",'basic.chr.na':"1",'basic.pos.na':"152313385",'basic.ref.na':"G",'basic.alt.na':"A",'basic.trans.na':"NM_002016.2",'basic.hgvsc.na':"NM_002016.2:c.1501C>T",'basic.hgvsp.na':"NP_002007.1:p.Arg501Ter",'bio.type.na':"snp: ts",'bio.biotype.na':"protein_coding",'bio.impact.na':".",'bio.aachange.na':"R/*"},{'basic.row.na':"3",'basic.source.na':"HGMD",'basic.gene.na':"SMPD1",'basic.chr.na':"11",'basic.pos.na':"6390704",'basic.ref.na':"T",'basic.alt.na':".",'basic.trans.na':"NM_000543.5",'basic.hgvsc.na':"NM_000543.5:c.138_143del",'basic.hgvsp.na':"NP_000534.3:p.Ala48_Leu49del",'bio.type.na':"indel: del",'bio.biotype.na':"protein_coding",'bio.impact.na':".",'bio.aachange.na':"VLA/V"}];

        $table.bootstrapTable({ data: varData });
    });
</script>

Answer 1

我正在处理这个确切的问题。在我的例子中，我错过了 link 到 fontawesome 他们拉图标的地方：

link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"

缺少 bootstrap table 图标

Missing bootstrap table Icons

bootstrap-4

bootstrap-table