パンくずリストをアイコンフォントにしてみたよ( ̄∇+ ̄)vキラーン

パンくずリストをアイコンフォントで
前回に引き続き、今度はパンくずリストをアイコンフォントで実装してみた。

って、言うほど大層な事ではないけどね。

アイコンフォントの導入は済んでるので、あとはクラスを付与するだけという手軽さ。
アイコンフォントの導入はこちら↓

ちょっと前に、パンくずリストをプラグインなしで実装したばかり。


その時の出来上がりがこんな感じ↓

パンくずリスト

CSS(スタイルシートに追加)

スタイルシートに、ちょっとだけ追加します。

これは、クラス「lsf-icon」の前に「title」で指定したアイコンフォントを表示する設定です。

これによって、こんな風に表示できました↓
パンくずリストをアイコンフォントで

 

参考:Ligature Symbols

breadcrumb.phpを少し変更

class=”lsf-icon” title=”home”のように、title=””には「Ligature」を入れます。

元々のスタイルシートを修正

前回追加したパンくずリスト用のスタイルシートを修正。

感想

アイコンフォントを導入しさえすれば、あとは実に簡単であっという間にできてしまう。

画像の数もこれで大幅に削減できたし、少しは表示速度を上げられたかも。
PageSpeed Insightsが、なぜかエラー頻発で計れません。

キャッシュも設定しているので、2、3日して確認してみましょう♪

アイコンフォントでページトップへ戻るリンクを作成した記事はこちら↓

追記

前へ、次へのナビゲーションリンクをアイコンフォントで作成はこちら↓

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA