Font Awesome 5の基本的な使い方と、Font Awesome 4との違い
Font Awesomeはバージョン5になってから2つの方法で利用できるようになっています。
- WebフォントとCSSで利用する方法
- SVGとJavaScriptで利用する方法
また、年額$99の有料版も用意されていたり、スタイルが追加されていたりするので、今までのバージョン4からはかなり変わっています。
今回はバージョン4から何が変わったのかイマイチ分かっていない人に向けて、Font Awesome ５の基本的な使い方をまとめておきます。
Font Awesome 4との違い
Font Awesome ４と違い、Font Awesome ５ではスタイルが下記の4つになりました。
- Font Awesome Solid
- Font Awesome Regular
- Font Awesome Light
- Font Awesome Brands
その影響で、Font Awesome ４ではclass名が.faだったのが、スタイルに応じて変える必要が出てきました。
<!-- バージョン4 -->
<i class="fa fa-〇〇"></i>
<!-- バージョン5 -->
<i class="fas fa-〇〇"></i>
<i class="far fa-〇〇"></i>
<i class="fal fa-〇〇"></i>.faclassを使っても表示されないので注意が必要ですし、目的のアイコンのスタイルが何なのか確認する必要があります。
コーディング時は公式サイトのIconsページでコードをコピペするだけなので、そこまで影響がないのかもしれませんが、デザインツールで使うときにフォントが違うと表示されないことがあるので注意が必要です。
Font Awesome 5の使い方
Webフォントして利用する方法とSVGとして利用する方法の違い
Font Awesome 5では「Web Fonts with CSS」という方法と、「SVG with JavaScript」という方法の2種類があります。
できることの比較は下記の通りです（CSSを追加すればどちらでもひと通りのことはできますが、今回はあくまでもFont Awesome 5を入れただけの状態でできることの比較をしています）。
| SVG with JavaScript | Web Fonts with CSS | |
|---|---|---|
| アイコンのサイズ変更 | ◯ | ◯ |
| アイコンの拡大・縮小 | ◯ | × |
| 等幅サイズ | ◯ | ◯ |
| デフォルトでの回転対応 （CSSなどを新たに追加せずに） | ◯ | △（90,180,270度のみ） |
| 反転 | ◯ | ◯ |
| マスク | ◯ | × |
| アイコンを重ねる | ◯ | △（2つまでなら可能） |
| 疑似要素で使用 | △（非推奨） | ◯ |
| アイコンにテキストを重ねる | ◯ | × |
SVGだと疑似要素で使用する以外はひと通りのことができますし、アイコンの拡大や反転・移動・マスクなどのFont Awesome 5から追加された機能が使えます。
使い分けとしては、基本的にFont Awesome 5を使うときはSVG with JavaScriptを使って、今までのやり方に慣れていてそちらで利用したい場合や、JavaScriptを使用するのでその関係で何か不具合が発生する場合はWeb Fonts with CSSを使うという使い分けになりそうです。
Webフォントとして実装する方法
Webフォントとして実装する場合は、下記のタグを<head>タグ内に設置します（v5.6.3の部分は使用したいバージョンに変更する）。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">あとは使用したいアイコンをFont AwesomeのIconsページで探して、詳細ページにあるタグを設置すれば、アイコンが表示されます。
<i class="fab fa-font-awesome-flag"></i>SVGとJavaScriptで実装する方法
SVGとJavaScriptで実装する場合は、疑似要素にアイコンを表示できないので注意が必要です。
まずは、下記<script>をに設置します。
<script defer src="https://use.fontawesome.com/releases/v5.6.3/js/all.js"></script>あとはWebフォントの場合と同様で、使用したいアイコンをFont AwesomeのIconsページで探して、詳細ページにあるタグを設置すれば、アイコンが表示されます。
1点注意しなければならないのが、<i>タグから<svg>タグを使ったインラインSVGに書き換えられる点です。
そのため、<i>タグに対してCSSを当てても適用されません。
全角スペースを可視化してくれるVisual Studio Codeの拡張機能「zenkaku」 
Dart Sassを使う上で1番基本的なネストやアンパサンドの書き方｜Dart Sass入門 
Visual Studio Codeの「Debugger for Chrome」でJavaScriptのデバッグを行う 
Nuxt.jsで「Classic mode for store/ is deprecated and will be removed in Nuxt 3.」のエラーメッセージが表示される場合の対処法 
Visual Studio Codeのファイル横に表示されるファイルアイコンのテーマまとめ 
スマホやPCにプッシュ通知をしてくれる「Push7」をブログに追加する方法 
Visual Studio CodeをMarkdownエディターとして使用する 
Vue CLIでVue.jsの開発環境をセットアップするまでの流れ 
Nuxt.jsでaxios-moduleを使ってAPIからデータを取得・表示する｜Nuxt.jsの基本 
WordPressのプラグインはどれを入れたら良い？とりあえず最初に導入をオススメするプラグイン一覧 
iTerm2で「Use System Window Restoration Setting」を設定しているとアラートが表示されて機能しない 
iPadで入力モードを切り替えずに数字や記号をすばやく入力する方法 
Keynoteで有効にしているはずのフォントが表示されない現象 
iPhoneやiPadでYouTubeの再生速度を3倍速や4倍速にする方法 
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法 
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ 
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること 
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する 
1Passwordでウェブサイトの入力フォームを一瞬で入力する方法 
JavaScriptで特定のOSやブラウザの判定を行う方法 
Notionログイン時の「マジックリンク」「ログインコード」をやめて普通のパスワードを使う 
AlfredでNotion内の検索ができるようになるワークフロー「Notion Search」 
Gitで1行しか変更していないはずのに全行変更した判定になってしまう 
Macでアプリごとに音量を調節できるアプリ「Background Music」 
Macのターミナルでパスワード付きのZIPファイルを作成する方法 
MacBook Proでディスプレイのサイズ調整をして作業スペースを広げる 
SteerMouseの「自動移動」機能で保存ダイアログが表示されたら自動でデフォルトボタンへカーソルを移動させる 
iPhoneでタッチが一切効かなくなった場合に強制再起動する方法 
Google Chromeのサイト内検索（カスタム検索）機能を別のプロファイルに移行する方法