WebDesigner's Memorandumウェブデザイナーの備忘録

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 JavaScriptWeb 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ページで探して、詳細ページにあるタグを設置すれば、アイコンが表示されます。

Font Awesome の設置

<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を当てても適用されません。

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね
文章量
ソート
Twitterをフォロー Facebookでいいね

記事一覧

関連記事 人気記事 ランダム

目次

X（旧：Twitter）

効率化に関する情報をポストしています。
ぜひフォローよろしくお願いします。

フォロー

表示設定

ダークモード

この機能はCookieを使用して、設定した内容を保存しています。個人を特定したりするものではありませんが、気になる方はプライバシーポリシーをご覧ください。