缺少引导数据库表图标
缺少引导数据库表图标
提问于 2021-02-26 03:09:26
我正在使用Bootstrap和Bootstrap-table，但无法显示图标。我已经仔细检查过了，以确保我的版本是正确的，尽管打印、排序等图标没有显示在表格的顶部。当我将代码复制到bootstrap-table在线编辑器中时，显示多个排序，但不显示其他按钮。这种现象与平台无关(发生在chrome、firefox和safari中)。
问题(请注意缺少图标)
我应该看到的
我的HTML页眉
<!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>我的身体
<!--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>回答 1
Stack Overflow用户
回答已采纳
发布于 2021-02-28 00:48:26
我正在处理这个问题。在我的例子中，我错过了到fontawesome的链接，在那里他们正在拉图标：
link rel="stylesheet“href="https://use.fontawesome.com/releases/v5.6.3/css/all.css”
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66374929
复制相关文章
相似问题
腾讯云开发者
