如何用SASS为Bootstrap面包屑配置FontAwesome图标分隔符

嘿，刚好我之前也折腾过类似的需求，给你两个靠谱的解决办法：

方法一：直接覆盖伪元素样式（最直接高效） #

你已经设置了$breadcrumb-divider变量，但Bootstrap默认只会把这个值放到.breadcrumb-item::before的content属性里，不会自动帮你设置FontAwesome的字体族。所以只需要在导入Bootstrap之后，添加一段自定义样式覆盖即可：

// 先按官方流程导入Bootstrap核心文件
@import "bootstrap/functions";
@import "bootstrap/variables";

// 自定义面包屑分隔符为FontAwesome右箭头
$breadcrumb-divider: "\f105";

// 导入完整Bootstrap
@import "bootstrap";

// 关键：给伪元素指定FontAwesome字体
.breadcrumb-item::before {
  font-family: 'FontAwesome';
  // 可选：按需调整图标大小、颜色等样式
  // font-size: 0.9em;
  // color: #6c757d;
}

方法二：利用Sass混合宏（更贴合Bootstrap原生写法） #

如果你想更“Bootstrap风格”一点，可以自定义一个mixin来封装分隔符逻辑，不过其实第一种方法已经足够简单了。如果非要用mixin的话，代码大概是这样：

@mixin breadcrumb-divider($divider, $font-family: inherit) {
  .breadcrumb-item::before {
    content: $divider;
    font-family: $font-family;
  }
}

// 在导入Bootstrap之后调用这个mixin
@include breadcrumb-divider("\f105", 'FontAwesome');

额外注意事项 #

• 确保你已经正确引入了FontAwesome的字体资源（不管是CDN还是本地文件），否则图标会显示成方框或者乱码；
• 如果你的FontAwesome是自定义@font-face引入的，记得把font-family的值和你定义的名称保持一致（比如有些版本叫'Font Awesome 5 Free'，要对应上）。

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