G3 のパンくずリストのスタイルのカスタマイズサンプルです。
※G3 のアップデートで home アイコンが追加されたら、最初のブロックは削除してください。
/* 先頭に 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 アイコンの番号のようなものです。
調べ方は添付画像をご参照ください。
上記の CSS を追加したパンくずリストはこうなります。
パンくずリスト
-
この返信は3年、 6ヶ月前に対馬 俊彦が編集しました。
Attachments:
You must be
logged in to view attached files.