MogHouse

備忘録と忘備録どっちが正しいんだっけ

【2018年5月版】はてなブログでFont Awesome5を使う

f:id:mogy:20180503214810p:plain

案の定早々に飽きてすっかりほったらかしになってるはてなブログ
久々に覗いてみたらなんだかアクセスが増えてる。
どうやらFont Awesomeを使いたい人が昔書いた記事を見に来ているらしい。

ただ、2年前の記事なのでFont Awesomeがバージョンアップした関係上、記事の通りにやっても上手く動かないようだ。
せっかくなので最新のFont Awesome5の導入方法を調べてみた。

前回の記事を読んでFont Awesome4を入れた人向けにFont Awesome5へのアップデート方法を記事の最後に書いたので必要な方はどうぞ。

前回の記事はこちら moghouse.hatenablog.com

Font Awesomeって何だっけ?

様々な用途で便利に使えるWebアイコンフォント。
フォントなのでサイズや色の変更をCSSで好きなように出来て便利。
2年前は600種類程だったが、今は1000種類以上に増えている。
わぁい!

セットアップ手順

公式でCDNが公開されている。

Font Awesome

以前はメールアドレスの登録が必要だったが、今はタグをコピペするだけで良いらしい。
バージョン3の頃もタグのコピペでOKだったらしいので、やっぱ登録はめんどいって意見が多かったんだろうなぁ・・・w

f:id:mogy:20180503225545p:plain

まずは「SVG with JS」を選択。
CSS版もあるが、JavaScript版の方が機能豊富なんだとか。
「Web Fonts with CSS」は古いブラウザにも対応させたい時に選ぶと良いらしい。

f:id:mogy:20180503231003p:plain

CDNはPro版とFree版があり、アイコンの種類もSolidにRegular、Light、Brandsの他、全部入りのAll等色々と種類があるが、基本的にFree版のAllで良いと思う。
使用するアイコンが予め限定されている場合はそれぞれを選べば良い。
黒枠に表示されたタグをコピーしておく。

f:id:mogy:20180503222743p:plain

ちなみにSolid、Regular、Light、Brandsの違いはこんな感じ。
Solidは塗りつぶしたアイコン、Regularは線画が中心のアイコン、LightはRegularより線が細くて塗りつぶし箇所も減らした軽い印象のアイコン、Brandsは各企業やアプリのアイコンといった感じ。
色が青くなっている物はPro版でしか使えない。つまりFree版で使えるのはSolidとBrandsが中心。

コピペ先はヘッダの中だのフッタの中だの解説サイトによってまちまちだが、 僕は設定画面の詳細設定の中にある「headに要素を追加」という項目にコピペした。 f:id:mogy:20180503231448p:plain

早速使ってみる

Font AwesomeのIconsやExamplesのページを見ると、タグの書き方が乗っているので使ってみる。

Icons | Font Awesome
How to Use | Font Awesome

<i class="fas fa-anchor"></i> こんな感じ
こんな感じ

<i class="fas fa-anchor fa-2x"></i> サイズを変えたり
サイズを変えたり

<i class="fas fa-anchor fa-spin"></i> 回転させたりも出来る
回転させたりも出来る

僕は以下のサイトを参考に、見出しにアイコンを付けることにしている。

tbpgr.hatenablog.com

種類が多すぎてどれを使えばいいかわからん

とりあえず使い勝手が良さそうなアイコンを一覧にしてみた。

アイコン タグ
<i class="fas fa-cubes"></i>
<i class="fas fa-cube"></i>
<i class="far fa-check-square"></i>
<i class="far fa-square"></i>
<i class="far fa-thumbs-up"></i>
<i class="far fa-thumbs-down"></i>
<i class="far fa-smile"></i>
<i class="far fa-frown"></i>
<i class="fas fa-cog"></i>
<i class="fas fa-trophy"></i>
<i class="far fa-star"></i>
<i class="fas fa-shopping-cart"></i>
<i class="far fa-edit"></i>
<i class="far fa-newspaper"></i>
<i class="fas fa-history"></i>
<i class="fas fa-graduation-cap"></i>
<i class="far fa-envelope"></i>
<i class="fas fa-coffee"></i>
<i class="fas fa-book"></i>
Font Awesome4からアップデート

※以前の記事を読んでFont Awesome4を導入した人向け

アップデート手順は公式にちゃんと書かれている。

How to Use | Font Awesome

要は互換用のJavaScriptを追加してやれば良いみたい。
ただし、Font Awesome5はJavaScript版を使用しなければならない。
バージョンはFont Awesome5の使用バージョンに合わせておけば良さそう。

f:id:mogy:20180503233017p:plain

これでFont Awesome4の書き方でも正常に表示されるようになる。

最後に

筆不精なのでやっぱり続かなかったなぁ。
記事書くのって色々時間かかるから中々書こうっていう気にならないんだよねぇ。
もっと手早く書けるようになれれば良いのだけれど。