Question

所以我尝试使用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课程的字体？

Answer 1

试试这个：

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

Answer 2

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

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

!important应覆盖标准样式集。

我希望这会有所帮助。

Answer 3

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

$breadcrumb-divider: "\f105";

现在，您必须在伪元素::before content属性中设置此变量。并为其应用font shorthand属性。

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

我认为应该起作用，请尝试一下。

谢谢。

Answer 4

2020年-Google将我带到这里来进行类似的活动。

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

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

Answer 5

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

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

Answer 6

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

如果您使用的是 Bootstrap 5 和 FontAwesome 5，这个 SCSS 将起作用。

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

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

6 个答案: