navbar-toggler-icon 不显示的主因是缺少带 .navbar 类的最近祖先容器，导致 css 变量 --bs-navbar-toggler-icon-bg 未定义；需确保结构为 ，并正确加载 bootstrap 4 css 与 js。
navbar-toggler-icon 不显示？先检查 .navbar 祖先容器是否在位
90% 的图标不出现，是因为 .navbar-toggler-icon 没拿到 CSS 变量 --bs-navbar-toggler-icon-bg。这个变量只在带 .navbar 类的**最近祖先元素**上定义，不是全局生效，也不写在按钮自身里。
错误写法：<div><button class="navbar-toggler"></button></div>——父 <div> 没 <code>.navbar，图标背景为空
正确写法：<nav class="navbar"><button class="navbar-toggler"></button></nav>
如果中间套了 .container 或 .row，.navbar 必须是它**直接可向上找到的第一个带该类的祖先**，不能隔太远。
还要确认：Bootstrap 4 的 bootstrap.min.css 已加载，且没被其他样式覆盖（比如重置了 background-image）。
想换图标？别动 JS，直接覆盖 background-image 或 CSS 变量
Bootstrap 4 的 .navbar-toggler-icon 是纯 CSS 背景图（SVG data URL），不是字体、不是伪元素、也没内容可替换。改 font-size 或加额外 class 都无效。
最简方式是覆盖 background-image：
.navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23ff66cb' stroke-width='2' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
注意点：
- SVG 中单引号必须 URL 编码（
'→%27），否则解析失败 - 颜色、线宽、间距全靠改 SVG 里的
stroke、stroke-width和坐标控制 - 若用外部 SVG 文件：
background-image: url("/icons/menu.svg")，记得加background-repeat: no-repeat和background-position: 50%
图标显示但点不动？检查 data-bs-toggle / data-target 是否配对
Bootstrap 4 实际用的是 data-toggle 和 data-target（不是 data-bs-* 前缀，那是 Bootstrap 5 的）。写错前缀或漏掉任一属性，图标就“有形无功”。
关键要求：
-
data-target的值必须和目标<div> 的 <code>id**完全一致**（大小写、连字符、空格都不能差） - 目标容器必须有
.collapse类，且没被 JS 删除或 CSS 强制设为display: block - 确保 jQuery 和 Bootstrap JS 正确加载，且顺序为：jQuery → Popper.js（可选）→ Bootstrap JS
典型结构：
<nav class="navbar"><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent"></button> <div class="collapse navbar-collapse" id="navbarContent">...</div> </nav>
改颜色或去边框？优先用 .navbar-light / .navbar-dark 控制基础样式
Bootstrap 4 默认提供两套图标：浅色栏用深色图标（.navbar-light），深色栏用浅色图标（.navbar-dark）。它们通过不同 background-image 实现，不是靠 color 属性。
常见定制需求：
- 去掉默认边框：
.navbar-toggler { border: 0; }，再补一句.navbar-toggler:focus { outline: none; } - 统一改图标颜色：不要单独调
color，而是重写整个background-image中的stroke值（如stroke='%230d6efd'） - 让图标在深色背景上更醒目：给
.navbar-dark .navbar-toggler-icon单独覆盖，避免被父级规则覆盖
真正容易被忽略的是：图标尺寸本身不可缩放（它是背景图），所有“变大变小”的感觉，其实来自周围 padding、容器高度或媒体查询对整个 .navbar 的调整。改图标前，先看清楚你动的是哪一层。
