MogHouse

備忘録と忘備録どっちが正しいんだっけ

はてなブログでFont Awesomeを使う

f:id:mogy:20160703225336p:plain

みんな大好きFont Awesome!

Font Awesomeって何なのさ?

様々な用途で便利に使えるWebアイコンフォント。
フォントなのでサイズや色の変更をCSSで好きなように出来て便利。
600種類以上のアイコンが揃っているので、わざわざ自分で用意する必要が無い。
じゃあもう使うしかないでしょ。

はてなブログにもWebアイコンフォント無かったっけ?

確かにある。
ただ、現状80種類くらいしかないし、あんまり汎用性のあるアイコンが無い。
とはいえ基本的なアイコンは一通り揃っているので、
こっちで十分という人もいるかもしれない。
使い方はこちらのサイトに詳しく書いてある。

shirokai.hatenablog.com

セットアップ手順

公式でCDNが公開されている。

Get Started with Font Awesome

f:id:mogy:20160703121225p:plain

以前はタグをコピペするだけで利用できたが、
今はメールアドレスの登録が必要になっているらしい。

メールアドレスを入力して送信ボタンを押すと、
FontAwesomeからメールが届くので、そこに書かれているコードをコピペすれば良い。

コピペ先はヘッダの中だのフッタの中だの解説サイトによってまちまちだが、 僕は設定画面の詳細設定の中にある「headに要素を追加」という項目にコピペした。 f:id:mogy:20160703123004p:plain

早速使ってみる

Font AwesomeのIconsやExamplesのページを見ると、タグの書き方が乗っているので使ってみる。

Font Awesome Icons
Font Awesome Examples

<i class="fa fa-anchor" aria-hidden="true"></i> こんな感じ
こんな感じ

<i class="fa fa-anchor fa-2x" aria-hidden="true"></i> サイズを変えたり
サイズを変えたり

<i class="fa fa-anchor fa-spin" aria-hidden="true"></i> 回転させたりも出来る
回転させたりも出来る

僕は以下のサイトを参考に、見出しにアイコンを付けることにしている。

tbpgr.hatenablog.com

種類が多すぎてどれを使えばいいかわからん

とりあえず使い勝手が良さそうなアイコンを一覧にしてみた。

アイコン タグ
<i class="fa fa-cubes"></i>
<i class="fa fa-cube"></i>
<i class="fa fa-check-square-o"></i>
<i class="fa fa-square-o"></i>
<i class="fa fa-thumbs-o-up"></i>
<i class="fa fa-thumbs-o-down"></i>
<i class="fa fa-smile-o"></i>
<i class="fa fa-frown-o"></i>
<i class="fa fa-cog"></i>
<i class="fa fa-trophy"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-shopping-cart"></i>
<i class="fa fa-pencil-square-o"></i>
<i class="fa fa-newspaper-o"></i>
<i class="fa fa-history"></i>
<i class="fa fa-graduation-cap"></i>
<i class="fa fa-envelope-o"></i>
<i class="fa fa-coffee"></i>
<i class="fa fa-book"></i>
最後に

Markdownの中にHtmlタグが紛れ込んでるのは気持ち悪いけど、
こればっかりは慣れるしかないのかな。
アイコンも運用ルール決めて上手く使い分け出来るようにしたい。