オークニズム

はてなブログでのカスタマイズやブログ運営ノウハウをメインに、オークニが気になったモノ、コトをシェアするブログです!ᔪ(°ᐤ°)ᔭ

【アイコン】はてなブログで「Font Awesome」をサクッと使う方法

f:id:a24o92:20171229021447j:plain

もはやアイコンフォントはデフォ。

画像ではなく、フォントとしてのアイコン。すなわち超軽量かつ拡大縮小に伴う画質の劣化もありえない。

モバイルファーストのこのご時世、”もはやアイコンフォントはデフォ”と言っても過言ではない。

アイコンにいちいち画像を使うなんてナンセンスなんで、そんな人はさっさと「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"> 

f:id:a24o92:20171229140439j:plain

一応、バージョンとかがあって更新される可能性もあるので、下記のリンクで確認して頂ければと!

Font Awesome · BootstrapCDN by MaxCDN

まーぶっちゃけ、更新されたところで新しいアイコンが追加されたとかなんで、上記コードのコピペで問題ないかと!

使いたいアイコンのCSSをコピペ

f:id:a24o92:20171229142016j:plain

Font Awesome Icons

こちらには約700個くらいのアイコンが常備されているので、あとはここから好きなアイコンを選ぶだけ!

例えばヘッダーのグローバルナビの「ホーム」の先頭にアイコンを付けたいなら…家っぽいアイコンを探してクリックする。

するとこのような画面になるので、iで始まるHTMLソースをコピー 

f:id:a24o92:20171229170258j:plain

先頭に付けたいので、aタグ内の先頭に挿入

<a href="http://www.okuni.me/"><i class="fa fa-home" aria-hidden="true"></i> ホーム</a>

これでばっちしアイコンが反映される!
また、その他のメニューについても同様にいい感じのアイコンを探して挿入していくと 

f:id:a24o92:20171229190629j:plain

こんな感じになるぞ!

オシャンティー! 😍

大きさや色も自由自在

もちろん、これはフォントとして扱えるので、CSSで大きさや色やその他装飾も色々できます!

例えば大きさを変えるなら

<i class="fa fa-home fa-2x" aria-hidden="true"></i>

このように挿入するときにclassに付与してあげるだけで2倍とかでできる!詳しいカスタマイズに関しては、こちらのサイトで確認すると便利! 

まとめ

まーぶっちゃけ、アイコンなんてメニューの先頭とかその辺でしか使うことないので、そんなに重宝しないっちゃしないけど…笑

でも、ブログ然りwebで仕事してるなら必ず使う時があるので、使い方とか触ってみるのはいいと思いますよーーー!😂

では!