Bootstrap怎么修改Navbar导航栏折叠按钮（Hamburger）的图标样式-Bootstrap教程-PHP中文网

应移除默认svg后注入自定义图标，bootstrap 5.3+需用javascript清空.navbar-toggler-icon再插入新svg，或用css伪元素配合data url实现；5.2及更早版可覆盖background-image但有局限。

bootstrap怎么修改navbar导航栏折叠按钮（hamburger）的图标样式

怎么替换 `navbar-toggler` 默认的三横线图标

Bootstrap 的 navbar-toggler 按钮默认用 SVG 内联图标（三横线），它不是通过 CSS 类控制，而是硬编码在 HTML 里。想换图标，不能只改 CSS，得先移除原生 SVG，再注入新内容。

常见错误是只覆盖 .navbar-toggler-icon 的 background-image，但 Bootstrap 5.3+ 已弃用该方式——新版直接渲染 SVG 元素，CSS 背景会被忽略。

最稳妥做法：用 JavaScript 在 DOM 加载后清空 .navbar-toggler-icon 内容，再插入自定义 SVG 或 Unicode 字符
如果用 Bootstrap 5.2 及更早版本，可覆盖 background-image，但需注意 base64 编码长度限制和缩放问题
别用 !important 强行覆盖 SVG 的 fill，因为它是内联属性，优先级更高

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav">
  <span class="navbar-toggler-icon"></span>
</button>

用纯 CSS + 自定义 SVG 替换图标的实操步骤

不依赖 JS，靠伪元素 + 自定义 SVG Data URL 实现，兼容 Bootstrap 5.3+。

关键点：把原生 SVG 设为 display: none，再用 ::before 注入新图标。Data URL 中的 %20 代表空格，%3C 是 的编码，务必 URL 编码完整，否则 SVG 不渲染。

Bootstrap

Bootstrap 官方编译版下载、npm 安装和 CDN 引入入口。

下载

复制你要的 SVG 图标（例如叉号），用在线工具转成 Data URL（推荐 https://yoksel.github.io/url-encoder/）
在 CSS 中隐藏原生图标：.navbar-toggler-icon { display: none; }
给 .navbar-toggler 添加伪元素：.navbar-toggler::before { content: ""; display: inline-block; width: 1.5rem; height: 1.5rem; background: url("data:image/svg+xml,%3Csvg..."); background-size: contain; background-repeat: no-repeat; }
注意 width/height 要匹配图标比例，否则拉伸变形

用 Font Awesome 图标替代时的坑

直接在 .navbar-toggler-icon 里写 <i class="fa fa-bars"></i> 看似简单，但会破坏 Bootstrap 的 JS 行为——因为 navbar-toggler 依赖 .navbar-toggler-icon 的存在来触发折叠逻辑，插 DOM 节点可能让事件委托失效。