htmlcss Bootstrap 4 のパンくずリストで Font Awesome を使う

CATEGORY: HTML/CSS | TAG:

2018年11月30日

Bootstrap 4 のパンくずリスト（Breadcrumb）のセパレータを変更するには、Sass 変数 $breadcrumb-divider の値を変更します。（関連ページ：Bootstrap4 の使い方）

以下はデフォルトの「/」から「>」に変更する場合の例です。（Changing the separator）

$breadcrumb-divider: quote(">");

Font Awesome のアイコンフォントを使う場合は、この方法ではうまく行かず、以下のように CSS で !important を使って設定すると良いようです。

//Font Awesome 4 の場合
.breadcrumb-item + .breadcrumb-item::before 
{
  content: "\f101" !important;   
  font-family: 'fontAwesome';  
}

//Font Awesome 5 （Webフォント）の場合
.breadcrumb-item + .breadcrumb-item::before 
{  
  content: "\f101" !important; 
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

Bootstrap 4 のデフォルトの bootstrap.css にはパンくずリストのクラス（.breadcrumb）が以下のように設定されています。 

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  list-style: none;
  background-color: #e9ecef;
  border-radius: 0.25rem;
}

.breadcrumb-item + .breadcrumb-item {
  padding-left: 0.5rem;
}
.breadcrumb-item + .breadcrumb-item::before {
  display: inline-block;
  padding-right: 0.5rem;
  color: #6c757d;
  content: "/";
}
.breadcrumb-item + .breadcrumb-item:hover::before {
  text-decoration: underline;
}
.breadcrumb-item + .breadcrumb-item:hover::before {
  text-decoration: none;
}
.breadcrumb-item.active {
  color: #6c757d;
}

Sass 変数を使う場合は、以下のようにすると変更できるようです（この方法が正しいかは定かではありません）。

//Font Awesome 5 （Webフォント）の場合
$breadcrumb-divider: quote("\f101");

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

@import "path/to/bootstrap/scss/bootstrap";

Bootstrap 4 の _breadcrumb.scss にはパンくずリストのクラス（.breadcrumb）が以下のように設定されています。

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: $breadcrumb-padding-y $breadcrumb-padding-x;
  margin-bottom: $breadcrumb-margin-bottom;
  list-style: none;
  background-color: $breadcrumb-bg;
  @include border-radius($breadcrumb-border-radius);
}

.breadcrumb-item {
  // The separator between breadcrumbs (by default, a forward-slash: "/")
  + .breadcrumb-item {
    padding-left: $breadcrumb-item-padding;
    &::before {
      display: inline-block; // Suppress underlining of the separator in modern browsers
      padding-right: $breadcrumb-item-padding;
      color: $breadcrumb-divider-color;
      content: $breadcrumb-divider;
    }
  }

  // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
  // without `<ul>`s. The `::before` pseudo-element generates an element
  // *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
  //
  // To trick IE into suppressing the underline, we give the pseudo-element an
  // underline and then immediately remove it.
  + .breadcrumb-item:hover::before {
    text-decoration: underline;
  }
  // stylelint-disable-next-line no-duplicate-selectors
  + .breadcrumb-item:hover::before {
    text-decoration: none;
  }

  &.active {
    color: $breadcrumb-active-color;
  }
}