Bootstrap Icons 图标颜色失效的根源在于其加载机制：字体图标依赖 color 但受继承限制，内联 SVG 若含硬编码 fill 或缺失 fill="currentColor" 则 CSS 无法覆盖；真正可控方案是统一用外层容器控制 color（字体图标）或删净内联属性改用 CSS 变量（inline SVG）。
直接改 color 或 fill 无效，不是你 CSS 写错了，而是 Bootstrap Icons 的 SVG 图标根本没给你留出“被覆盖”的机会——它要么是字体图标，要么是带硬编码 fill 的内联 SVG，两者都绕过了常规样式链。
字体图标路径下 color 不生效的三个卡点
Bootstrap Icons 默认以字体形式加载（<i class="bi bi-search"></i>），此时图标颜色靠 color 控制，但极易静默失效：
-
color被父容器禁用继承：比如<button disabled><i class="bi bi-x"></i></button>中，禁用按钮强制设了color: inherit且上层无显式color，图标就变灰，这不是 bug，是字体图标渲染机制决定的 - CDN 加载顺序错位：如果
bootstrap-icons.css在bootstrap.min.css之后引入，--bs-primary等变量未定义，bi-primary类会退化为默认黑灰色 - 类名漏掉
bi-前缀：写成class="icon-search"或class="search"，样式表压根不匹配，DOM 里图标存在，但 CSS 规则完全没命中
内联 SVG 路径下 fill 不生效的根本原因
你复制了官网的 SVG 源码贴进 HTML，却还是改不了颜色？问题大概率出在路径节点上残留的硬编码属性：
-
<path fill="#212529">这类内联fill值优先级高于外部 CSS，fill: currentColor直接被忽略 -
<svg>根元素没设fill="currentColor"，子元素无法继承，即使 CSS 写了svg { fill: currentColor; }也白搭 - 用构建工具（如 SVGR）时，
svgoConfig没配removeAttrs: { attrs: 'fill|stroke' }，原始 SVG 的fill属性被原样保留
真正可控的两种落地方案
别再死磕单点覆盖，从使用路径上切换策略：
立即学习“前端免费学习笔记（深入）”；
- 坚持用字体图标 → 改用外层容器控制：
<span style="font-size: 20px; color: #10b981;"><i class="bi bi-check"></i></span>，比直接给i加style更稳，避免font-size锯齿 - 必须精确控制颜色/动画/多色 → 切到 inline SVG：
<svg class="icon" viewBox="0 0 16 16"><path d="..." /></svg>，删光所有fill和stroke，CSS 里统一写.icon { --icon-fill: #3b82f6; } .icon path { fill: var(--icon-fill, currentColor); }
最常被忽略的是：你以为在调样式，其实是在和加载时机、属性继承链、构建配置三层系统博弈。改一个 color 前，先确认图标走的是哪条路径，再决定动 HTML、CSS 还是构建配置。
