【アイコン】はてなブログで「Font Awesome」をサクッと使う方法
もはやアイコンフォントはデフォ。
画像ではなく、フォントとしてのアイコン。すなわち超軽量かつ拡大縮小に伴う画質の劣化もありえない。
モバイルファーストのこのご時世、”もはやアイコンフォントはデフォ”と言っても過言ではない。
アイコンにいちいち画像を使うなんてナンセンスなんで、そんな人はさっさと「Font Awesome」を実装しちゃおう😂
Font Awesomeを使うには？
まず、ヘッダーにCSSを読み込ませる必要がある。Googleのwebフォントみたいな感じでいわゆるCDNを使うやつ！
コンテンツデリバリーネットワーク（CDN、Content Delivery Network）とは、Webサイト上のコンテンツ/Webページをユーザーにスムーズに届けるためのキャッシュサーバーのネットワークのこと。
やり方は簡単。
まず管理画面の「設定」→「詳細設定」
スクロールしていくと「検索エンジン最適化」の中に「headに要素を追加」という項目がある。
その窓の最後に以下のコードを挿入して、一番下にある「変更する」をクリック。
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
一応、バージョンとかがあって更新される可能性もあるので、下記のリンクで確認して頂ければと！
Font Awesome · BootstrapCDN by MaxCDN
まーぶっちゃけ、更新されたところで新しいアイコンが追加されたとかなんで、上記コードのコピペで問題ないかと！
使いたいアイコンのCSSをコピペ
こちらには約700個くらいのアイコンが常備されているので、あとはここから好きなアイコンを選ぶだけ！
例えばヘッダーのグローバルナビの「ホーム」の先頭にアイコンを付けたいなら…家っぽいアイコンを探してクリックする。
するとこのような画面になるので、iで始まるHTMLソースをコピー
先頭に付けたいので、aタグ内の先頭に挿入
<a href="http://www.okuni.me/"><i class="fa fa-home" aria-hidden="true"></i> ホーム</a>
これでばっちしアイコンが反映される！
また、その他のメニューについても同様にいい感じのアイコンを探して挿入していくと
こんな感じになるぞ！
オシャンティー！ 😍
大きさや色も自由自在
もちろん、これはフォントとして扱えるので、CSSで大きさや色やその他装飾も色々できます！
例えば大きさを変えるなら
<i class="fa fa-home fa-2x" aria-hidden="true"></i>
このように挿入するときにclassに付与してあげるだけで2倍とかでできる！詳しいカスタマイズに関しては、こちらのサイトで確認すると便利！
まとめ
まーぶっちゃけ、アイコンなんてメニューの先頭とかその辺でしか使うことないので、そんなに重宝しないっちゃしないけど…笑
でも、ブログ然りwebで仕事してるなら必ず使う時があるので、使い方とか触ってみるのはいいと思いますよーーー！😂
では！
