銀杏の木

最近 wordpress などを使った他の人のブログに共通のアイコンが使われているのに気づいた。

調べてみると、 font awesome というサイトのフリーアイコンを使っているのが分かった。

分かりやすいアイコンな気がしたので、自分のブログにも設置してみた。

まずは、ブログ左側の「コーナー」のツリー表示にフォルダアイコンを設置したかったのだが、いきなり壁にぶちあたった。 rNote はこの部分のツリー表示は ul, li などで実現しており、フォルダアイコンを表示させたい部分は ul に対するスタイルシートで list-style-type:square; を指定して「・」として表示させているのだが、 font awesome がアイコンを表示させる通常の方法はスタイルシートではなく <i> などの無効タグに class="hoge" の形でクラス要素を指定することで実現しているので、この場合、通常の方法では font awesome のアイコンが表示できないのだ。

いろいろ検索して、「FontAwesomeのiconをulやolのlist-styleに使う方法」という記事を見つけた。スタイルシートで、

li:before {

  font-family: FontAwesome;

  content: '\f073'; /* icon unicode */

}

のようにして li:before を定義し、アイコンフォントの文字コードを指定するという形で実現できることが分かったので、フォルダを設置することができた。

ただ、この方法だと、コード番号しか指定できないのだが、 font awesome のアイコン一覧を見ると、同じコード番号でありつつ、違うデザインのアイコンも存在している。例えば、カレンダーのアイコンである calender-alt は２種類あって、どちらもコード番号は \f073 なのだが、片方は fas(solid style) で、もう片方は far(regular style) である。 i タグを使う場合は、このスタイルを普通に記述すればよいのだが、今回のようにスタイルシートで実装しないといけない場合、 fas, far の違いを指定する方法がないので、表示させたいアイコンを指定する方法がない。これは困ったが、とりあえずフォルダアイコンについては同じコード番号のアイコンが複数あるというわけではなかったため設置できた。

その他にも、日時の表示部分に時計のアイコンなどを設置してみた。これららは i タグで実現できたので問題はなかった。