Bootstrap 5面包屑分隔符无法显示Font Awesome 6.2双色调图标

问题情况 #

替换Bootstrap 5.2面包屑分隔符为Font Awesome Duotone图标时，图标在页面上无法显示，但浏览器开发者工具中能看到对应的SVG代码存在。

相关代码 #

HTML代码 #

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

原CSS代码 #

.breadcrumb-item+.breadcrumb-item::before {
  content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuMi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIyIEZvbnRpY29ucywgSW5jLiAtLT48ZGVmcz48c3R5bGU+LmZhLXNlY29uZGFyeXtvcGFjaXR5Oi40fTwvc3R5bGU+PC9kZWZzPjxwYXRoIGNsYXNzPSJmYS1wcmltYXJ5IiBkPSJNNDQ4IDI1NmMwIDguMTg4LTMuMTI1IDE2LjM4LTkuMzc1IDIyLjYybC0xNjAgMTYwYy05LjE1NiA5LjE1Ni0yMi45MSAxMS44OS0zNC44OCA2LjkzOEMyMzEuOCA0NDAuNiAyMjQgNDI4LjkgMjI0IDQxNlY5NmMwLTEyLjk0IDcuNzk3LTI0LjYxIDE5Ljc1LTI5LjU2YzExLjk3LTQuOTUzIDI1LjcyLTIuMjE5IDM0Ljg4IDYuOTM4bDE2MCAxNjBDNDQ0LjkgMjM5LjYgNDQ4IDI0Ny44IDQ0OCAyNTZ6Ii8+PHBhdGggY2xhc3M9ImZhLXNlY29uZGFyeSIgZD0iTTIyNCAzMjBIMzJjLTE3LjY3IDAtMzItMTQuMzMtMzItMzJWMjI0YzAtMTcuNjcgMTQuMzMtMzIgMzItMzJoMTkyVjMyMHoiLz48L3N2Zz4=);
}

问题原因 #

1. Duotone样式无法继承：Font Awesome Duotone的fa-secondary类透明度设置写在外部CSS中，但伪元素content里的SVG无法继承该样式，导致图标视觉上不可见。
2. SVG尺寸与对齐问题：原始SVG未设置尺寸，默认可能过大/过小，加上未与文本对齐，导致视觉上偏离视线或被遮挡。

解决方案 #

方案1：直接使用Font Awesome类名（推荐） #

先引入Font Awesome 6 Duotone的CSS文件，再通过字体编码设置分隔符：

.breadcrumb-item+.breadcrumb-item::before {
  content: "\f0da"; /* 替换为你需要的Duotone图标编码 */
  font-family: "Font Awesome 6 Duotone";
  font-weight: 900;
  color: #6c757d; /* 匹配Bootstrap默认分隔符颜色 */
  margin: 0 0.5rem; /* 调整间距 */
  vertical-align: middle; /* 对齐文本 */
}

方案2：修复SVG代码 #

修改SVG，将fa-secondary的透明度直接写入path属性，并设置SVG尺寸，同时调整伪元素样式：

.breadcrumb-item+.breadcrumb-item::before {
  content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiPjxwYXRoIGNsYXNzPSJmYS1wcmltYXJ5IiBkPSJNNDQ4IDI1NmMwIDguMTg4LTMuMTI1IDE2LjM4LTkuMzc1IDIyLjYybC0xNjAgMTYwYy05LjE1NiA5LjE1Ni0yMi45MSAxMS44OS0zNC44OCA2LjkzOEMyMzEuOCA0NDAuNiAyMjQgNDI4LjkgMjI0IDQxNlY5NmMwLTEyLjk0IDcuNzk3LTI0LjYxIDE5Ljc1LTI5LjU2YzExLjk3LTQuOTUzIDI1LjcyLTIuMjE5IDM0Ljg4IDYuOTM4bDE2MCAxNjBDNDQ0LjkgMjM5LjYgNDQ4IDI0Ny44IDQ0OCAyNTZ6Ii8+PHBhdGggY2xhc3M9ImZhLXNlY29uZGFyeSIgZD0iTTIyNCAzMjBIMzJjLTE3LjY3IDAtMzItMTQuMzMtMzItMzJWMjI0YzAtMTcuNjcgMTQuMzMtMzIgMzItMzJoMTkyVjMyMHoiIG9wYWNpdHk9IjAuNCIvPjwvc3ZnPg==);
  vertical-align: middle;
  margin: 0 0.5rem;
}

内容的提问来源于stack exchange，提问作者Artur