はてなブログでFont Awesomeを使う
みんな大好きFont Awesome！
※2018/05/04追記
この記事はFont Awesome4の導入記事です。
最新のFont Awesome5の導入記事はこちら
moghouse.hatenablog.com
Font Awesomeって何なのさ？
様々な用途で便利に使えるWebアイコンフォント。
フォントなのでサイズや色の変更をCSSで好きなように出来て便利。
600種類以上のアイコンが揃っているので、わざわざ自分で用意する必要が無い。
じゃあもう使うしかないでしょ。
はてなブログにもWebアイコンフォント無かったっけ？
確かにある。
ただ、現状80種類くらいしかないし、あんまり汎用性のあるアイコンが無い。
とはいえ基本的なアイコンは一通り揃っているので、
こっちで十分という人もいるかもしれない。
使い方はこちらのサイトに詳しく書いてある。
セットアップ手順
公式でCDNが公開されている。
以前はタグをコピペするだけで利用できたが、
今はメールアドレスの登録が必要になっているらしい。
メールアドレスを入力して送信ボタンを押すと、
FontAwesomeからメールが届くので、そこに書かれているコードをコピペすれば良い。
コピペ先はヘッダの中だのフッタの中だの解説サイトによってまちまちだが、
僕は設定画面の詳細設定の中にある「headに要素を追加」という項目にコピペした。
早速使ってみる
Font AwesomeのIconsや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> 回転させたりも出来る
回転させたりも出来る
僕は以下のサイトを参考に、見出しにアイコンを付けることにしている。
種類が多すぎてどれを使えばいいかわからん
とりあえず使い勝手が良さそうなアイコンを一覧にしてみた。
| アイコン | タグ |
|---|---|
<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タグが紛れ込んでるのは気持ち悪いけど、
こればっかりは慣れるしかないのかな。
アイコンも運用ルール決めて上手く使い分け出来るようにしたい。
