k144 Personal Note

パーソナルノート・ライフログ、気の向くまま書き綴っています。

はてなブログで「FontAwesome」を使う

スポンサーリンク

FontAwesome とは何か?

fontawesome.io

WEBフォントと呼ばれるアイコンフォントを提供するサービスです。

こちらはSeesaaブログで使用した記事です。
【WEBフォント】Font Awesomeのアイコンフォントを使ってみた、WEBフォントでSeesaaブログをパワーアップ!


はてなブログで使ってみよう

まず、FontAwesomeを使えるようにするためのコードを取得しましょう。こちらのページから、はてなブログに組み込む「link」タグをコピーしましょう。
Get Started with Font Awesome

はてなブログへの組み込みは、「設定」→「詳細設定」タブの中の「headに要素を追加」の部分にコーピーした「link」コードをペーストして変更を確定しましょう。
f:id:k-144:20160228194053j:plain


アイコンフォントを使ってみよう

「FontAwesome」のIconページから利用したいアイコンを選んでみましょう。
Font Awesome Icons

例えば、この記事内で利用している外部リンクのアイコンを利用するにはこちら
fa-external-link: Font Awesome Icons
表示されている「i」タグをコピーして記事内の表示させたいところにペースト。


こんな風に。

簡単ですね。