概要
Font Awesome を はてなブログで利用して見栄えを良くする
経緯
最近、 Qiita の技術記事を書く際に Font Awesome を利用していました。
自分自身としては、記事が見やすくなっていいかな、というのが主な理由です。
本当に利用者が見やすいと思ってくれているかどうか分からないまま継続して利用していたのですが、
Qiita の 2014年 Ruboty Advent Calendar にて、 Ruboty のコードリーディングに関する記事の
ブックマークコメントの中に以下のようなものがありました。
このリアクションを受けて、すぐに下記の記事を作成しました。
Qiita の記事の見出しに Font-Awesome を利用して見栄えを良くする
すると、あっという間に多くのストックをいただいたため、
Font Awesome を利用した記事のほうが見栄えがいいと思っていただけている、と判断しました。
（その後、他の記事でもアイコンが見やすい、というコメントがあった）
そこで、はてなブログでも Font Awesome を利用することにしました。
CSSの設定
Qiita は、 Qiita 自身がシステム内で Font Awesome を利用しているため、
特別に CSS を読み込む設定を行う必要はありませんでした。
はてなブログでの Font Awesome 設定手順
- デザインメニューを開く
- カスタマイズを選択
- ヘッダを選択
- タイトル下の中に下記の HTML を追記する
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
- 準備完了
これで、 CSS の読み込み設定が完了です
Font Awesome を利用した記事の作成
以下のように記述すると、当記事の 「概要」 部のような表示になります
<i class="fa fa-cubes" style="font-size:1em;"></i> 概要
補足
Sublime Text を利用していて Markdown + Font Awesome の編集作業を円滑に行いたい方は 下記もあわせてご確認ください。
Sublime Text Snippet
Sublime Text を利用していて、楽に Font-Awesome を利用した Markdown を記述したい方は こちらの記事を参照してください。
Sublime Text | Font Awesome のタグを snippet 化して楽に入力する
Sublime Text Markdown Preview
Sublime Text を利用していて、楽に Font-Awesome を編集しながら Markdown のプレビュー表示をしたい方は こちらの記事を参照してください。
Sublime Text | Markdown Preview Plugin で fontawesome を利用できるようにする
