賢威7のパンくずリストのアイコンは、デフォルトでは画像になっています。

このアイコン画像を、前回の記事「賢威7でWebアイコンフォント「Font Awesome」を実装する方法」で実装した「Font Awesome」のWebアイコンフォントに変更する方法をご紹介します。

変更はスタイルシートに追記するだけ

実装はCSSに追記するだけです。当サイトの場合は、賢威の子テーマで運用しているので、子テーマディレクトリの「base.css」に追記しています。

「base.css」に追記する内容

/*アイコンをFont Awesomeに変更*/
.breadcrumbs-in li{
margin-right: 10px;
padding-right: 0px;
background: none;
}
.breadcrumbs-in li:after{
content: "\f105";
font-family: FontAwesome;
}
.breadcrumbs-in li:before{
content: "\f114";
font-family: FontAwesome;
}
.breadcrumbs-in li.bcl-first:before{
content: "\f015";
font-family: FontAwesome;
}

/*アイコンをFontAwesomeに変更 Retina(高解像度)ディスプレイ用*/
@media screen and (-webkit-min-device-pixel-ratio:2),
(min-resolution: 2dppx){ 
.breadcrumbs-in li,
.breadcrumbs-in li:before,
.breadcrumbs-in li.bcl-first:before{
background: none;
}
.breadcrumbs-in li:after,
.breadcrumbs-in li:before,
.breadcrumbs-in li.bcl-first:before{
padding-bottom:3px;
}
}

もともとアイコン画像を指定しているところを「none(無し)」にして、「Font Awesomeの各アイコンフォントを指定」してあげます。

賢威7では、iPhoneやMacなどの高解像度(Retina)ディスプレイ用に、解像度の高いアイコン画像を別途指定しているので、こちらも「none」にします。

そうしないと、iPhoneで確認するとFont Awesomeのアイコンフォントの下にアイコン画像が重なって表示されますのでご注意ください。

なお、高解像度の方だけ、「padding-bottom:3px;」と指定しているところがありますが、iPhoneで確認すると、アイコンフォントが下にずれているので、「padding-bottom:3px;」と下に余白を付けることで高さがセンターになるよう、指定しています。

パンくずリストをアイコン画像からFont Awesomeに変更した結果

各アイコン画像をWebアイコンフォントを変更した結果が上の画像です。

「>」もFont AwesomeのWebアイコンフォントを利用しています。

なお、フォルダは中が白ですが、色が塗ってあるフォルダアイコンもありますので、お好みで変更してください(フォルダ以外でも可能です)。