Bootstrap modify breadcrumb with fontawesome icon separator with SASS

问题

So I'm trying to change the default breadcrumb style with SASS. I've setup everything as mentioned in the official Bootstrap 4 beta 3 docs. I've changed the following in the custom.scss

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

Now this also needs font family to set to

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

How do you setup the font for the .breadcrumb-item::before class in the right way?

回答1:

Try this:

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

回答2:

The actual tag as listed in breadcrumb.scss is:

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

The !important should overwrite the standard styling set.

I hope this helps.

回答3:

If you are using Bootstrap 4 and Font Awesome 5,

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

回答4:

you are defining a variable for the scss like:

$breadcrumb-divider: "\f105";

now you have to set this variable in the pseudo-element ::before content property. and also apply the font shorthand property to it.

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

I think it should be work please try it.

Thank you.

来源：https://stackoverflow.com/questions/48152733/bootstrap-modify-breadcrumb-with-fontawesome-icon-separator-with-sass