引入bootstrap.min.css后Unicode字符显示异常求助

问题本质 #

这是Bootstrap的全局字体规则覆盖了原有字体 fallback 顺序导致的——同一个Unicode码点在不同字体中的字形差异极大，Bootstrap强制给页面元素设置了它的默认字体列表，优先加载了和原有图标字体不同的字体，才会出现垃圾桶变“篮球框”的情况。

具体解决办法 #

• 锁定原有图标字体
  给使用自定义Unicode图标的元素单独指定字体，优先级高于Bootstrap样式：

  /* 替换成你原本使用的图标字体名称 */
  .custom-unicode-icon {
    font-family: "Segoe UI Symbol", sans-serif !important;
  }
  

  然后把这个类加到目标元素上：<button class="delete-btn custom-unicode-icon">🗑️</button>

• 修改全局字体fallback顺序
  找到Bootstrap设置的全局font-family规则（通常在body选择器下），把你原有图标字体移到列表最前面，确保优先加载：

  body {
    font-family: "你的原有图标字体", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  }
  

• 改用Bootstrap原生图标（彻底规避冲突）
  直接替换成Bootstrap官方的图标系统，比如Bootstrap Icons，既统一风格又不会有字体冲突：

  <button class="delete-btn"><i class="bi bi-trash"></i></button>
  

• 局部重置字体
  如果只有少数元素受影响，局部覆盖Bootstrap的字体设置：

  .delete-btn {
    font-family: inherit !important; /* 继承父元素原本的字体配置 */
  }
  

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