Webアイコンフォントを使って表現する応用の効くシンプルなパンくず

意外と役に立つ、応用の効きやすいパンクズリストのサンプルです。
Font Awesomeの矢印を:before擬似要素を使って表示することで、HTMLがスッキリします。
contentプロパティに使いたいアイコンフォントを入れることで、
ちょっとデザインを変更するのにわざわざ画像を作り直したりすることもなくなり、
cssの変更だけで楽チン簡単更新です。

パンくずリスト(breadcrumb list)は、ウェブサイト内でのウェブページの位置を、ツリー構造を持ったハイパーリンクの一覧として示すもの。パンくずナビ、トピックパス、フットパスとも言う。英語では単に“breadcrumbs”または“breadcrumb navigation”というのが一般的である。
ウェブディレクトリのような大規模なウェブサイト内で、利用者がサイト内での現在位置を見失わないようにし、ナビゲーションを助けるために使われる。「パンくずリスト」という名前は、童話『ヘンゼルとグレーテル』で、主人公が森で迷子にならないように通り道にパンくずを置いていった、というエピソードに由来する。
wikiより引用

使用するclass名

.topicPath

View

Source

Comments are closed.