Search code examples
bootstrap-4bootstrap-table

Missing bootstrap table Icons


I'm using Bootstrap and Bootstrap-table, but can't get the icons to show. I've double checked to make sure that my versions are correct, however regardless the icons for print, sort etc are not showing at the top of the table. When I copy the code into the bootstrap-table online editor, the multi sort shows but not the other buttons. This phenomenon is platform independent (occurs in chrome, firefox and safari).

The Problem (Notice the lack of icons)

Notice no icons

What I should be seeing

enter image description here

My HTML Header

<!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/[email protected]/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/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>

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

    <!--BOOTSTRAP TABLE EXTENSIONS-->
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/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/[email protected]/dist/bootstrap-table.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/extensions/filter-control/bootstrap-table-filter-control.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/extensions/multiple-sort/bootstrap-table-multiple-sort.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/extensions/reorder-rows/bootstrap-table-reorder-rows.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/extensions/print/bootstrap-table-print.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/extensions/key-events/bootstrap-table-key-events.min.js"></script>       
</head>

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

And my Script section

    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>

Solution

  • I was dealing with this exact issue. In my case i was missing the link to fontawesome where they are pulling the icons:

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