2021.4.30 追記

Lightning 14.0.10 でパンくずリストの先頭にホームアイコンが追加されました。

以下の CSS によりパンくずリストのスタイルをカスタマイズしてみました。

/* 先頭に home アイコンを表示 */
.breadcrumb li:first-child::before {
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  content: '\f015';
  padding-right: 0.3em;
  color: #00fa9a;
}

/* リストアイテムの右に右向き三角アイコンを表示 */
.breadcrumb li::after {
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  content: '\f0da';
  padding: 0 0.3em;
  color: #00fa9a;
}

/* 最後のリストアイテムの右はアイコンなし */
.breadcrumb li:last-child::after {
  content: '';
}

content: の¥マークに続く4文字の記号は Font Awesome の以下の部分です。

Font Awesome Unicode

投稿者プロフィール

対馬 俊彦
対馬 俊彦魚沼情報サービス 代表
新潟県南魚沼市・魚沼市を中心に、地域の皆様がパソコンやインターネットを有効活用して業務効率化・課題解決を図るお手伝いを1999年から行ってまいりました。

Lightning / Katawara を使用したサイト制作は全国どこからでも承ります。遠方からのご依頼の場合、Zoom を使用して打ち合わせを行わせていただきます。

講習形式のホームページ制作サポートも行っています。
お客様ご自身でホームページを制作・カスタマイズする上で、むずかしい部分を講習形式でサポートいたします。制作を手伝ってもらうだけでなく、同時に制作スキルを身につけたいという方はお気軽にお問い合わせください。