Bootstrap Selectpicker图标动态切换异常：显示字符而非图标求助

问题根源 #

你在jQuery中直接设置content: "\F3E0"时，JavaScript的转义规则和CSS不同：CSS里的\F22C是十六进制字符转义，但JS会把\F识别为无效转义，最终输出字符串F3E0而非对应Unicode图标。

可行解决方案 #

方案1：使用JS的Unicode转义序列 #

在JS中用\u开头的四位十六进制转义（匹配CSS的十六进制码点），注意补全四位（比如F3E0直接写\uF3E0）：

$('.selectpicker').on('changed.bs.select', function() {
  $('.bootstrap-select .dropdown-toggle .filter-option-icon').css('content', '\uF3E0');
});

方案2：切换CSS类（推荐，样式与逻辑分离） #

提前在CSS中定义选中状态的图标样式，用JS切换类即可：

/* 默认图标样式 */
.bootstrap-select .dropdown-toggle .filter-option-icon::after {
  content: "\F22C";
  font-family: "Bootstrap-icons"; /* 确保字体名称与引入的一致 */
}

/* 选中后的图标样式 */
.bootstrap-select .dropdown-toggle .icon-selected::after {
  content: "\F3E0";
}

$('.selectpicker').on('changed.bs.select', function() {
  $('.bootstrap-select .dropdown-toggle .filter-option-icon').toggleClass('icon-selected');
});

方案3：直接使用图标字符 #

复制\F3E0对应的实际图标字符（可在CSS生效后从浏览器开发者工具中复制），直接赋值给content：

$('.selectpicker').on('changed.bs.select', function() {
  $('.bootstrap-select .dropdown-toggle .filter-option-icon').css('content', '"🏠"'); // 替换为F3E0对应的实际字符
});

额外检查项 #

• 确认已正确引入Bootstrap Icons字体文件，路径和版本无误
• 确保CSS中font-family设置正确（通常为"Bootstrap-icons"或"bootstrap-icons"）
• 无需配置白名单，问题核心是JS与CSS转义规则的差异

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