杉岡システム公式ブログ

https://blog.sugiokasystem.co.jp

【2021年1月現在最新版】Font Awesome 6のセットアップ(バージョンに左右されない方法)

タイトルイメージ画像

 

Font Awesomeって何?

Font Awesomeとは、数多くのアイコンを配布しているサイトおよび、そこで配布されているWebアイコンフォトやSVGを提供しているサービスです。

矢印やSNSアイコンなど、ちょっとしたことで必要となってくるWebアイコンが豊富に揃っており、商用利用も可能です。

 

Webアイコンフォトは拡大縮小しても画質が荒くなることがなく、色やサイズをCSSで簡単に変えることもできるので大変重宝します。

 

昨今は数多くのテンプレートなどでも使用されており、弊社が使用している「はてなブログ」で使用可能なブログデザインのテンプレート内でも散見されます。

 

無料版と有料版の共通点と相違点

共通点

無料版でも有料版でも商用利用が可能

Webサイトやドキュメント内などで使用可能

 

相違点

使用可能なアイコン数

無料版…… 1,609アイコン使用可能

有料版…… 7,865アイコン使用可能

無料版では使えないタイプのアイコンも多数存在しますが、そこまでこだわりがなければ無料版でも十分使えますので、

まずは無料版から始めてみて、その後有料版にするかどうか決めるのをオススメします。

Font Awesomeの導入方法

Font Awesome最新版を使うには以下の2つの方法があります。

  • サーバーにアップロードする
  • CDNを利用する

 

1.ダウンロードして使う(SVGファイル)

Font Awesomeのトップページ > 上部メニュー「icon」 >

ダウンロードしたいアイコンを選択 >

画面右から使用したいアイコンタイプ(下画像の赤枠内)を選択(※)
※) 無料版の場合、アイコンによってはアイコンタイプの選択画面が表示されないことがあります。

画面右から使用したいアイコンタイプを選択する画面のイメージ画像

 

画像右上のダウンロードボタン(下画像の赤枠内のボタン)をクリック >

画像右上のダウンロードボタンのイメージ画像

あとはポップしてきた画面内の「Agree & Download the SVG(同意してダウンロード)」ボタンをクリックすれば、ダウンロードできます。

画像はSVG形式で保存されます。

 

 

2.CDNを利用する

CDNを利用すれば、わざわざ画像をダウンロードする必要がないので、画像の配置方法が比較的スムーズに済むのでオススメです。

CDNを活用する方法としては主に

の2つがあります。

旧バージョンまではCSSで読み込む方法しかなかったため、Font Awesomeのバージョンが変わるたびにCSSでバージョンを書き換えないとアイコンが読み込めなくなるということが頻繁に起こっていたわけですが、

JavaScriptで読み込むことでバージョンに左右されずに好きなアイコンをずっと使うことができるようになりました。

 

CSSで読み込む方法

筆者としてはJavaScriptで読み込む方法を推奨しますが、一応CSSで読み込む方法も記載しますと、以下のようになります。

1.事前準備:下記のタグを head タグ内にコピー&ペースト

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">

赤文字部分がバージョンを記載する部分になります。

使用するバージョンによって赤文字部分を変更する必要があります。

現在のバージョンを確認するにはこちら(Font Awesomeトップページ)から飛んでいただき、下画像の赤枠部分をご確認ください。

Font Awesomeのバージョン記載場所

 

2.アイコンの配置:HTML内の好きな位置にアイコンコードをコピー&ペースト

使いたい画像(アイコン)を見つけたら、下画像の赤枠内にあるアイコンコードをクリックしてコピーしてください。

アイコンコードとは<i>タグで形成されたHTMLタグのことです。

アイコンコード部分のイメージ画像

 

コピーしたアイコンコード(<i>タグ)をHTML内の配置したい位置にペーストします。

<i class="fab fa-twitter"></i>

 赤文字部分は使用するアイコンによって変わります。

 また、アイコンの色や大きさも変えることが出来ますが、それに関しては別記事にて後日ご紹介します。

 

JavaScriptで読み込む方法

Font Awesome内で発行される「Kit」コードによってJavaScriptを読み込む方法です。

こちらの方法だと、Font Awesomeの最新バージョンに合わせていちいちHTMLタグを書き換える必要はありません。

その代わり、Kitコードを発行するためにはFont Awesome内でアカウントを作成(ログイン)する必要があります。

 

1.アカウント作成/ログイン

Font Awesomeトップページより、下画像の赤枠内にあるボタンをクリックしてアカウントを作成します。

Font Awesomeのアカウント作成画面

 

すでにアカウントをお持ちの場合はログインする場合は、同じくFont Awesomeトップページより画面右上(下画像の赤枠内)にある「Sign In」ボタンをクリックしてログインしてください。

Font Awesomeログイン方法

 

2.マイページ内から「Font Awesome Kits」をコピー

無料版だとKitは1つだけ作成できます。

まずはマイページ内の中央あたりにある「Font Awesome Kits」項目内の「Manage Kit」ボタン(下画像の赤枠内)をクリックします。

Font Awesome Kits

 

自分専用に発行されたFont Awesome Kit番号が表示されます。

Kit番号をクリック(下画像の赤枠内)すると、

Font Awesome Kit number

 

下画像の赤枠内のように、Kitコードが表示されます。

そうしましたら、「Copy Kit Code!」ボタンをクリック(下画像赤枠内)してKitコードをコピーしてください。

Font Awesome Kit Code

上画像のようなページが表示されなかった場合は、「Setting」タブを開いてしまっている可能性があります。

その場合は、「How to Use」タブ(上画像の黄色枠内)をクリックすると上画像のようなページが表示されます。

 

3.下記のタグを head タグ内にペースト

<script src="https://kit.fontawesome.com/Kitコード.js" crossorigin="anonymous"></script>

あとはコピーしたKitコードをHTMLの <head></head> 内に挿入してください。

これでバージョンに左右されないFont Awesome使用環境の完成です。