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)
What I should be seeing
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/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>
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"