Bootstrap Table配置Bootstrap5图标替换默认Font Awesome图标未生效咨询

核心问题 #

data-icons为对象类型配置项，HTMLdata-*属性仅支持传入合法JSON格式的字符串，当前写法为JS对象字面量，框架无法解析为有效配置。

分步修复 #

1. 修正data-icons的JSON格式 #

• 原写法错误点：
  • 用JS单引号（JSON强制双引号）
  • 未将整个配置串用引号包裹（HTML属性值不支持无引号换行）
  • 键名未加双引号（JSON语法要求）
• 正确HTML写法（用单引号包裹整个JSON，避免与HTML属性双引号冲突）：

<table
  id="table"
  data-icons='{"toggleOff":"bi bi-alarm","toggleOn":"bi bi-alarm","columns":"bi bi-alarm"}'
  data-toggle="table"
  data-height="460"
>

2. 确认前置依赖 #

• 必须引入Bootstrap Icons的CSS文件（否则bi bi-*类无法渲染）
• 核对当前Bootstrap Table版本的icons配置键名（确保toggleOff/toggleOn/columns为合法键名）

3. 备选JS配置（规避HTML格式问题） #

若HTML写JSON易出错，可改用JS初始化（需删除data-toggle="table"避免重复初始化）：

$(function() {
  $('#table').bootstrapTable({
    icons: {
      toggleOff: 'bi bi-alarm',
      toggleOn: 'bi bi-alarm',
      columns: 'bi bi-alarm'
    },
    height: 460
  });
});

4. 调试验证 #

• 打开浏览器控制台，检查是否有JSON解析报错（如Unexpected token，定位格式问题）
• 用元素面板检查渲染后的图标元素，确认是否包含bi bi-alarm类

内容的提问来源于stack exchange，提问作者Samuel