Font Awesomeをダウンロードしてオンプレ環境で使う

Webサイトで、手軽にアイコンフォントを導入できる Font Awesome。
通常、使用する場合は CDN 経由であるが、社内システムなど、外部（インターネット）に接続できない環境だと CDN は使えない。

この記事では、Font Awesome をダウンロードして、インターネットに接続できない環境でもアイコンを使えるようにする方法を紹介する。

手順は、簡単だ。

スポンサーリンク

ダウンロード

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

2023年2月時点では、バージョン６が最新だった。また、Free版と有償の Pro版があるが、今回は Free版をダウンロードした。

https://fontawesome.com/download

ダウンロードした圧縮ファイル（ZIP）を解凍する。解凍後、展開されたフォルダは、次のような構造になっている。

ROOT
├─css
├─js
├─less
├─metadata
├─scss
├─sprites
├─svgs
│  ├─brands
│  ├─regular
│  └─solid
└─webfonts

WEBアプリへの組み込み

上でダウンロードしたファイルから、必要なファイルをコピーして WEBアプリに組み込む。
コピーしてくるのは、次のファイルです。 css や webfonts のフォルダ構造を合わてファイルをコピーしましょう。（フォルダ構造合わせないと読み込みに失敗します）

├─css
│      all.css
└─webfonts
       ※すべてのファイル

【コピー後のイメージ】

LINKタグの設定

ダウンロードした css/all.css を読み込むように、 <link> タグの設定を行います。

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

確認

ここまでで、Font Awesome をダウンロードして使う手順は完了である。

実際に、chrome の開発者ツールで通信内容を見てみると、CDN 経由ではなく、自分の Webサーバーから css や webフォントのファイルがダウンロードされているのが分かる。