Font Awesomeをローカルで読み込めるようにする方法

最近では、ほとんどの案件でFont Awsomeのアイコンを使うようになりました。

今回は、Font Awsomeをローカルにダウンロードして読み込む方法をご紹介します。

まずは、Font Awsomeのサイトから必要なファイル一式をダウンロードします。

「Font Awesome Free for the Web」ボタンをクリックするとダウンロードできます。

https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

ダウンロードしたファイルfontawesome-free-5.5.0-web.zipを解凍すると（2018/11/22時点）以下のような構成になっています。

・CSS

・js

・less

・metadata

・scss

・sprites

・svgs

・webfonts

・LICENSE.txt

cssディレクトリのall.min.cssを通常のcssと同じように、任意の場所に設置します。

例）
<link rel="stylesheet" href="/css/all.min.css">

次に、webfontsもcssディレクトリと同階層に設置します。

※ダウンロードした状態と同じディレクトリ構成となります。

これだけで読み込みの準備が整いました。

あとは、cssファイルで表示させたい箇所に下記のような記述をして使用してください。

font-familyは'Font Awesome 5 Free'になります。

例）

.sample ::before {
color: #fff;
content: "\f039";
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}

ハマりがちなfont-weightの設定

各アイコンには対応する分類があります。

このアイコンの場合、無料版ではSOLIDとREGULARです。

これらを使い分けるにはcssにfont-weightを指定する必要があります。

SOLID　→　font-weight:900;

REGULAR　→　font-weight:400;

LIGHT　→　font-weight:300;

BRANDS　→　font-weight:400;

BRANDSアイコンを使用するときも注意が必要で、font-familyを下記のように設定する必要があります。

font-family: 'Font Awesome 5 Brands';

これで、ローカルでFont Awesomeが使用できるようになりました。