默认 navbar-toggler-icon 不能直接换图是因为它使用 css 的 background-image（base64 svg）而非 img 标签，需通过覆盖 .navbar-toggler-icon 的 background-image 样式来替换。
为什么默认的 navbar-toggler-icon 不能直接换图
Bootstrap 5 的 navbar-toggler 默认用的是 SVG 内联图标（base64 编码的三横线），它被写死在 .navbar-toggler-icon 的 background-image 里，不是通过 <img> 标签加载的。所以你改 HTML 里的 <span class="navbar-toggler-icon"></span> 没用——这个 span 只是占位符，实际图标由 CSS 控制。
替换方案：覆盖 .navbar-toggler-icon 的 background-image
最轻量、兼容性最好、且不破坏 Bootstrap 结构的做法是重写这个类的背景图。你需要：
- 准备一张尺寸合适（推荐 24×24px 或 32×32px）、格式为
.png或.svg的自定义图标 - 把图片放在项目静态资源目录下（比如
assets/img/toggler-custom.svg） - 在自定义 CSS 文件中（确保它在 Bootstrap CSS 之后加载）添加如下规则：
`.navbar-toggler-icon {
background-image: url("../assets/img/toggler-custom.svg");
/* 可选：清除默认宽高限制，让图标按需显示 */
width: 1.5rem;
height: 1.5rem;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}`
注意：background-size: contain 能防止图标被拉伸；如果用 PNG，建议用透明底；若用 SVG，确保路径可访问（尤其在构建后路径变化时）。
如果想用 <img> 标签替代（更灵活但要改 HTML）
Bootstrap 不禁止你删掉 .navbar-toggler-icon，换成真实图片。但必须保留 .navbar-toggler 的语义和交互逻辑：
- 移除原
<span class="navbar-toggler-icon"></span> - 替换成
<img src="assets/img/menu-icon.png" alt="菜单" style="max-width:90%" style="max-width:90%"> - 务必给
<img>加class="navbar-toggler-icon"或额外类，并设置cursor: pointer（否则点击反馈不明显） - 响应式缩放可能出问题，建议用
width: 1.5rem+height: auto替代固定像素值
这种做法适合需要动画、悬停效果或 JS 动态切换图标的场景，但会多一次图片请求，且需手动处理无障碍属性（如 alt 和 role="button"）。
常见踩坑点
换图后图标不显示？大概率是这几个原因：
-
url()路径写错，尤其是相对路径层级不对（用浏览器开发者工具看 Network 面板是否 404） - CSS 文件没在 Bootstrap 之后加载，导致你的样式被覆盖
- 用了
background-size: cover导致小图标被裁剪（应优先试contain或100%） - 图标本身是黑底白线，在深色导航栏上“消失”了（检查颜色对比度）
- 在 Bootstrap 4 中规则名是
.navbar-toggler-icon，但某些定制版可能加了前缀，用 DevTools 看真实生效的选择器
真正麻烦的不是换图本身，而是图标在不同屏幕密度（如 Retina 屏）下的清晰度和点击热区大小——建议 SVG 优先，width/height 用 rem 单位，别硬写 px。
