Bootstrap 使用 SASS 修改带有 fontawesome 图标分隔符的面包屑

Posted 2023-03-06

【中文标题】Bootstrap 使用 SASS 修改带有 fontawesome 图标分隔符的面包屑

【英文标题】：Bootstrap modify breadcrumb with fontawesome icon separator with SASS

【发布时间】：2018-06-17 13:49:06

【问题描述】：

所以我正在尝试使用 SASS 更改默认的 breadcrumb 样式。我已经按照官方 Bootstrap 4 beta 3 文档中的说明设置了所有内容。我在custom.scss中更改了以下内容

$breadcrumb-divider: "\f105"; //fontawesome icon for fa-angle-right

现在这也需要字体系列设置为

font-family: 'fontAwesome'; //How do I plug this in

如何正确设置.breadcrumb-item::before 类的字体？

【问题讨论】：

你试过像平常一样瞄准它吗？ .breadcrumb-item font-family: 'fontAwesome';

我尝试了上面的方法，但如果我检查元素样式，它会使用相同的选择器添加两个不同的样式块。所以它有一个来自引导程序的样式的块和一个用于上述样式的第二个块。这是正确的方法吗？

【参考方案1】：

试试这个：

.breadcrumb-item::before 
    font-family: 'FontAwesome';
    content: "\f105";

【参考方案2】：

breadcrumb.scss 中列出的实际标签是：

    .breadcrumb-item + .breadcrumb-item::before 
      font-family: 'FontAwesome';
      content: "\f101" !important; 
    

!important 应该覆盖标准样式集。

我希望这会有所帮助。

【参考方案3】：

如果您使用的是 Bootstrap 4 和 Font Awesome 5，

.breadcrumb-item + .breadcrumb-item::before 
    font-family: "Font Awesome 5 Free";
    content: "\f105";
    font-weight: 900;

【参考方案4】：

您正在为 scss 定义一个变量，例如：

$breadcrumb-divider: "\f105";

现在您必须在伪元素 ::before content 属性中设置此变量。并将字体速记属性应用到它。

.breadcrumb-item+.breadcrumb-item::before
  font: normal normal normal 14px/1 FontAwesome;
  content: $breadcrumb-divider;

我认为应该可以，请尝试一下。

谢谢。

【参考方案5】：

2020 - 谷歌把我带到这里是为了类似的事情。

要在不使用图标库或弄乱 svg 的情况下将分隔符从标准的“/”更改为“>>”，这里是 css sn-p，可以通过自定义类“breadcrumb-custom”应用 'ol' 标签。

.breadcrumb-custom  .breadcrumb-item +  .breadcrumb-item::before  
  content: ">>"; 
  font-weight: bold; 
  color: #000000; 

【参考方案6】：

这可能有点晚了，但我想为当前库版本提供更新的答案。

如果你使用的是 Bootstrap 5 和 FontAwesome 5，这个 SCSS 可以工作。

.breadcrumb-item 
    + .breadcrumb-item 
        &::before 
            font-family: "Font Awesome 5 Free";
            font-weight: 700;
            content: "\f054" !important;