ホームページメニューバーにアイコン設置

ホームページは400ページ以上にカウンタを設置しており、そのほとんどのページにメーニューバーを設置している。

今回、そのメニューバーにカテゴリの語句だけでなくアイコンを設置した。

はじめはpng画像を付加しようとしたが、メニューバーの縦サイズが広がってうまく行かず、面倒そうであったFont Awesomeを設置する。参考にしたのは

Font Awesome 5の使い方とカスタマイズ方法を徹底解説!

のサイトです。

Font Awesomeを利用するためには、ページの<head>~</head>の中に、cssの設定をしなければならない。数ページだけならページ上部に書き込めばよいのだろうが、400ページを超えるととてもできそうにないと当初、敬遠していた。

ところが、メニューバーのjavascript内にそのcssの設置を書き込んで見ると、問題なく表示できたので、同一のメニューバーのページには、すべて適応されたことになる。

今後、ページを修正するとき、追加するときに、タイトルのトップにカテゴリのアイコンを設置してみるのもいいかなと考えている。