【Laravel】5.7 で fontawesome を使う(文字化け対策付き)

前提

laravel5.7 環境が構築済みで、かつ npm install 実行済みで js パッケージの初期化が行われていること。

fontawesome インストール

npm 経由で Font Awesome 最新無料バージョンをインストールする。依存関係のエントリは package.json にある。
以下を実行。(＠fo r tawesome が fontaweseme じゃない罠。アンインストール時は注意。)

プロジェクトルートで

$ npm install @fortawesome/fontawesome-free --save-dev

#webpack を編集
以下を追記する。

resouces/assets/sass/app.scss

// Fontawesome
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands';

resource コンパイル

プロジェクトルートで

$ npm run dev

サブディレクトリがない URL の場合はこれで使えるようになる。
あとは font-awesome icons を見ながら適宜利用する。

文字化け対策

サブディレクトリがあると、文字化けして □ 豆腐になる。
これは、フォント参照先が ドメイン名/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff2 とかになっているため。
(サブディレクトリが無いので参照できない。)
実体は プロジェクトルート/public/fonts にあるので、手っ取り早く対応するには fonts のシンボリックリンクを作る。

/var/www/html

$ ln -s /プロジェクトルート/public/fonts fonts

コンパイル時の参照の手前にサブディレクトリを付ける方法を知っている方いたら教えてください。

- 目次 -