Bootstrap Table 图标未显示

Question

我正在创建一个 bootstrap-table（版本 1.18），利用 bootstrap 版本 4.5.2

除了 table 图标没有显示外，一切似乎都正常工作 - 但是它们代表的 table 控制功能正在工作（即打印按钮仍然有效）

我在想我缺少图标的扩展名？但注意到似乎提到了这一点，并且以前的迭代基于 bootstrap 和 bootstrap-table DID 的先前版本。

下面是我的扩展导入和我的 table 设置，以及两张显示带有工作按钮的 mia 图标的照片。

<!-- Style sheets -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" 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://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<!-- BOOTSTRAP TABLE EXTENSIONS -->
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.0/dist/bootstrap-table.min.css">
<script src="https://unpkg.com/bootstrap-table@1.18.0/dist/bootstrap-table.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/bootstrap-table@1.18.0/dist/extensions/filter-control/bootstrap-table-filter-control.css">
<script src="https://unpkg.com/bootstrap-table@1.18.0/dist/extensions/filter-control/bootstrap-table-filter-control.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.18.0/dist/extensions/multiple-sort/bootstrap-table-multiple-sort.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.0/dist/extensions/reorder-rows/bootstrap-table-reorder-rows.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/TableDnD/0.9.1/jquery.tablednd.js" integrity="sha256-d3rtug+Hg1GZPB7Y/yTcRixO/wlI78+2m08tosoRn7A=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table@1.18.0/dist/extensions/reorder-rows/bootstrap-table-reorder-rows.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.18.0/dist/extensions/print/bootstrap-table-print.js"></script>

并且 Table 设置

<table id="varTable" class="table table-striped table-condensed table-hover table-sm table-responsive mx-auto"
style='width: 90%; 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.na"},{"sortName":"basic.pos.ba"}]'
data-use-row-attr-func="true"
data-reorderable-rows="true" 
data-show-print="true">
<thead>

想法？

Answer 1

我遇到了同样的问题。为我修复的是手动添加 fontawesome 样式 sheet.

<link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free.min.css">

Answer 2

bootstrap-table 的更新版本（1.19.0 或更高版本）使用 bootstrap 图标作为默认图标，而不是 fontawesome。要修复丢失的图标，请添加 bootstrap-icons 样式表，例如，对于 bootstrap-icons 的 1.8.1 版添加：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">

Bootstrap Table 图标未显示

Bootstrap Table Icons Not Showing

bootstrap-table

bootstrap-4