关于bootstrap Table工具栏图标丢失的真正原因

在网上搜索了很多解决图标的文章，但因水平有限，不得其所。干脆从图标本身问题下手。

一、常用的图标分为bootstrap-icons、fontawesome、icon，还需要确定字体的版本（具体不在介绍）一般调用方法如下：

    <!-- Bootstrap 3.x 版本 -->
    <i class="glyphicon glyphicon-refresh"></i>
     <!-- Bootstrap 4.x 版本 -->
    <i class="fa fa-search"></i>
     <!-- Bootstrap 5.x 版本 -->
    <i class="bi bi-search"></i>
    <!-- bootstrap-table  -->
    <i class="icon-search"></i>

我用bootstrap5.3、字体fontawesome4.7、bootstrap-table来举例说明。

在bootstrap-table.js文件中，搜索以下代码

getIconsPrefix: function getIconsPrefix(theme) {
      return {
        bootstrap3: 'glyphicon',
        bootstrap4: 'fa',
        bootstrap5: 'bi',
        'bootstrap-table': 'icon',
        bulma: 'fa',
        foundation: 'fa',
        materialize: 'material-icons',
        semantic: 'fa'
      }[theme] || 'fa';
    },

上述代码可以看出，bootstrap-table是根据不同的bootstrap版本确定图标显示方式，我采用fontawesome图标，干脆直接把 bootstrap5: 'bi'改成    bootstrap5: 'fa'

getIconsPrefix: function getIconsPrefix(theme) {
      return {
        bootstrap3: 'glyphicon',
        bootstrap4: 'fa',
        bootstrap5: 'fa',
        'bootstrap-table': 'icon',
        bulma: 'fa',
        foundation: 'fa',
        materialize: 'material-icons',
        semantic: 'fa'
      }[theme] || 'fa';
    },

继续往下找到

      fa: {
          paginationSwitchDown: 'fa-caret-square-down',
          paginationSwitchUp: 'fa-caret-square-up',
          refresh: 'fa-sync',
          toggleOff: 'fa-toggle-off',
          toggleOn: 'fa-toggle-on',
          columns: 'fa-th-list',
          detailOpen: 'fa-plus',
          detailClose: 'fa-minus',
          fullscreen: 'fa-arrows-alt',
          search: 'fa-search',
          clearSearch: 'fa-trash'
        },

在fontawesome4.7版本中好像没有了 refresh: 'fa-sync',图标。直接修改为fa fa-search，其他图标请自己测试是否存在，修改后的代码为

      fa: {
          paginationSwitchDown: 'fa-caret-square-down',
          paginationSwitchUp: 'fa-caret-square-up',
          refresh: 'fa fa-search',
          toggleOff: 'fa-toggle-off',
          toggleOn: 'fa-toggle-on',
          columns: 'fa-th-list',
          detailOpen: 'fa-plus',
          detailClose: 'fa-minus',
          fullscreen: 'fa-arrows-alt',
          search: 'fa-search',
          clearSearch: 'fa-trash'
        },

到此告一段落，文字处理的简陋，就是为了将问题记录下来。