# Font Awesome 5の基本的な使い方と、Font Awesome 4との違い URL: https://webrandum.net/font-awesome-5/ 公開日: 2019-11-11 更新日: 2019-11-11 カテゴリー: コーディングタグ: Font Awesome 出典: Webrandum（著者: サイトウマサカズ） 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`だったのが、スタイルに応じて変える必要が出てきました。 ``` ``` `.fa`classを使っても表示されないので注意が必要ですし、目的のアイコンのスタイルが何なのか確認する必要があります。コーディング時は公式サイトの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フォントとして実装する場合は、下記のタグを``タグ内に設置します（`v5.6.3`の部分は使用したいバージョンに変更する）。 ``` ``` あとは使用したいアイコンをFont Awesomeの[Iconsページ](https://fontawesome.com/icons?d=gallery)で探して、詳細ページにあるタグを設置すれば、アイコンが表示されます。 ![Font Awesome の設置](https://webrandum.net/mskz/wp-content/uploads/2019/11/image_1-7-1024x543.png) ``` ``` ### SVGとJavaScriptで実装する方法 SVGとJavaScriptで実装する場合は、疑似要素にアイコンを表示できないので注意が必要です。まずは、下記` ``` あとはWebフォントの場合と同様で、使用したいアイコンをFont Awesomeの[Iconsページ](https://fontawesome.com/icons?d=gallery)で探して、詳細ページにあるタグを設置すれば、アイコンが表示されます。 1点注意しなければならないのが、``タグから``タグに対してCSSを当てても適用されません。