用 ::before 为 Bootstrap 面包屑首页添加 home 图标，需选中首个 breadcrumb-item 内的 a 元素，设置 content: url()、display: inline-block、vertical-align: middle，并预留间距；IE 需用 base64 SVG 或 PNG 降级。
如何用 ::before 替换 Bootstrap 面包屑首页的默认图标
Bootstrap 5 默认用 > 作为分隔符，首页（通常是第一个 <li>）本身不带图标，但很多人想把首页文字前加个 home 图标。直接改 HTML 不灵活，用 CSS 伪元素最轻量。
关键不是“插入图片”，而是精准定位首页 <li> 并在它内部前置内容 —— 这得靠选择器精度和 content 的配合。
- 必须用
:first-child或更稳妥的:nth-child(1)，不能用:first-of-type（因为<li>前可能有注释或空格节点） -
content里写url(...)时路径是相对于 CSS 文件位置的，不是 HTML 页面 - 要预留图标宽度空间，否则文字会紧贴图标，建议加
padding-left或用margin-right控制间距
为什么 background-image 比 ::before 更容易出问题
有人试图给首页 <li> 加 background-image，但很快发现图标和文字重叠、对不齐，或者被后续分隔符遮盖。根本原因是：背景图默认从左上角开始平铺，而文字流式布局无法自动避让。
::before 是内联级伪元素，天然参与文本流，能用 vertical-align 对齐文字基线，也支持 display: inline-block 精确控尺寸。
立即学习“前端免费学习笔记（深入）”；
- 若用
background-image，必须设padding-left+background-position: left center+background-repeat: no-repeat，三者缺一不可 -
::before只需三行：content: url(./icons/home.svg); display: inline-block; vertical-align: middle; - SVG 图标在
content中会自动缩放为 1em 高度，比 PNG 更可控
兼容性陷阱：IE 不支持 content: url() 里的 SVG
IE11 及更早版本解析 content: url(./home.svg) 会直接失效，显示空白。这不是语法错，是 IE 对伪元素中 SVG 的加载限制。
- 降级方案：改用 base64 编码的 SVG 字符串，如
content: url("data:image/svg+xml;base64,PHN2Zy..."); - 更省事的做法：切一张 16×16 的
home.png，确保路径可访问，IE 就能正常渲染 - 别用
content: "?";—— emoji 在 Windows 旧字体下显示为方块，且无法控制大小和颜色
完整可用的 CSS 片段（适配 Bootstrap 5）
假设你的面包屑结构是标准的 <nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="/">首页</a></li>...</ol></nav>：
nav[aria-label="breadcrumb"] .breadcrumb-item:first-child a::before {
content: url("./icons/home.svg");
display: inline-block;
width: 1.2em;
height: 1.2em;
margin-right: 0.4em;
vertical-align: middle;
}
注意这里选的是 a 而不是 li —— 因为图标要放在链接文字前，且避免被 .breadcrumb-item.active 的样式干扰。如果首页不用链接，就换成 .breadcrumb-item:first-child::before，但得额外处理 padding-left 防止文字覆盖。
真正麻烦的不是写这几行 CSS，而是每次换图标都要重新测所有浏览器下的对齐和点击热区 —— 尤其当面包屑用了 flex-wrap 或响应式字体时，em 单位会跟着变。
