需用更高权重选择器.breadcrumb-item + .breadcrumb-item::before完整覆盖，默认/图标，显式设display: inline-block、margin: 0 0.5rem，并按Font Awesome版本正确设置content、font-family与font-weight；SVG需用url()引入且严格编码；小屏须@media重置；语义缺失需父元素加aria-hidden="true"。
Bootstrap面包屑图标被::before覆盖怎么办
Bootstrap默认用::before伪元素在.breadcrumb-item + .breadcrumb-item::before里插入/，你直接改content会失效——因为它的选择器权重更高，且没留自定义钩子。
必须用更高优先级覆盖，且不能只改content，还得处理display和margin等副作用。
- 用
.breadcrumb-item + .breadcrumb-item::before完整选择器重写，别偷懒简写成.breadcrumb::before - 显式设置
display: inline-block，否则某些图标（如Font Awesome）可能不渲染 - 加
margin: 0 0.5rem对齐原始间距，Bootstrap默认是0.5rem - 如果用SVG或字体图标，记得设
font-size或width/height，否则可能小得看不见
用Font Awesome替换时content值怎么写
不能直接写content: "\f105"——这只会输出字面字符串f105。必须加\转义，并确保CSS文件加载顺序在Bootstrap之后，且字体已正确引入。
- 查图标Unicode：打开Font Awesome官网，点开图标 → “Advanced” → “CSS” → 复制
content值，比如\f105对应angle-right - 写法必须是
content: "\f105"，前后不能有空格或引号类型错误（必须是英文双引号） - 加
font-family: "Font Awesome 6 Free"（v6）或"Font Awesome 5 Free"（v5），并指定font-weight: 900（solid图标）或400（regular） - 若用CDN，确认
css/all.css已加载；若本地部署，检查@font-face路径是否404
用SVG内联图标时为什么content不生效
content伪类不支持直接插入HTML或SVG标签，只接受字符串、计数器、attr()或URL。想塞SVG，只能走url()方式，但要注意路径解析和尺寸控制。
- 用
content: url("data:image/svg+xml,%3Csvg...%3E")（需URL编码）或content: url("/icons/arrow-right.svg") - 外部SVG路径必须可访问，且服务器返回
Content-Type: image/svg+xml，否则部分浏览器拒绝渲染 - 内联data URL要严格编码：
→%3C，>→%3E，空格→%20，推荐用在线工具编码 - SVG本身需带
width和height属性（如width="12" height="12"），否则可能拉伸变形
自定义图标后响应式断点错位怎么办
Bootstrap的.breadcrumb在sm以下会把分隔符换成»（两个角引号），但你的自定义::before不会自动适配——它始终生效，导致小屏下图标和文字挤在一起。
- 必须手动用
@media (max-width: 575.98px)重置.breadcrumb-item + .breadcrumb-item::before - 小屏下要么隐藏自定义图标：
content: ""+display: none，要么换更紧凑的符号（如content: ">"） - 检查
.breadcrumb-item的flex-wrap和white-space，避免文字折行顶开图标 - 如果用了
font-awesome，小屏下font-size缩得太小，建议用clamp(0.75rem, 0.5vw, 1rem)动态控制
真正麻烦的是图标语义——屏幕阅读器看不到content里的字符，如果替换成纯装饰性SVG，得补aria-hidden="true"逻辑，但伪元素本身无法加ARIA属性，只能靠父元素控制。这点容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
