はてなブログで「Font Awesome」を使う方法

アイコンフォントの決定版「Font Awesome」をはてなブログで使ってみたので、やり方をご紹介します。

設定方法

「ダッシュボード」→「設定」→「headに要素を追加」のテキストボックスに下記を加えるだけで使えるようになります。

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

試してみる

ブログの記事内に以下を入れてみましょう。

<i class="fa fa-thumbs-o-up"></i> Good！

Good！
このように表示されます。
記事のアクセントにピッタリですね。

「Font Awesome」では、たくさんのアイコンフォントで様々な表現が可能です。
アイコンの使い方について、もっと知りたいかたは以下の公式サイトをご覧ください。 fortawesome.github.io

あとがき

実は、私が現在使っているPC用のブログテーマでは、始めからアイコンフォントが利用できていました。
しかし、スマホ版のデフォルトテーマでは、テーマが違うため表示できていませんでした。
対応方法はいくつかあるのですが、今回は一番手軽な方法で導入してみました。

---

FontAwesomeが使えるおすすめのマークダウンエディタはこちら mu2in.hatenablog.com