知らないと損するFont Awesome(Webアイコンフォント)
みなさんWebアイコンフォントのFont Awesomeというものをご存知ですか。
僕は昨日初めてその存在を知りました（白目）。
前から気になってたんですが、他の人のブログを読んでいるとキレイなアイコンがたびたび出てくるんですよね。
「このアイコン綺麗だなー。みんな自作してるのかな？」と思ったんですが、違ったみたいです。
アイコンに関して調べたらFont AwesomeというWebアイコンフォントがあって
それを使用されている方が多いみたいです。
今回ははてなブログでFont Awesomeを使用する方法について書きたいと思います。
目次
公式サイト
まずは公式サイトから
はてな側の設定方法
ブログのダッシュボード(管理画面)にアクセスし、
「設定」→ 「詳細設定」 → 「headに要素を追加」
まで進みます。
そしてheadに以下をコピペします。
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
以上で設定は完了です！
自分の好きなアイコンを選ぶ
以下にアクセスすると、アイコンが並んでいると思います。
その中から自分が設定したいアイコンを探します。
設定したいアイコンを見つけたらそのアイコンをクリックしましょう。
今回は試しに「address-book」というアイコンを選択しました。
fa-address-book: Font Awesome Icons
アイコン詳細のページにいくと以下のようなCSSが貼り付けられていると思います。
<i class="fa fa-address-book" aria-hidden="true"></i>
これをコピーして自分のブログの好きな箇所に貼り付けます。
それだけでアイコンが表示されます。
このブログのナビゲーションバーのアイコンもFont Awesomeを使用しています。
まとめ
使うだけでサイトがおしゃれになるので
アイコンを使いたいけど、自作するのはちょっと・・・
という方はぜひ使ってみてはどうでしょうか！
おわり
