Laravel 6.x で Font Awesome を使用する 【npmでインストール】

#作業環境
Windows 10
Laravel : 6.18.35
Laravel/ui : 1.0
Laravel-mix : 5.0.1
Bootstrap : 4.0.0
MDBootstrap : 4.19.1
chart.js : 2.9.3
XAMPP
PHP : 7.4.3
Visual Studio Code
Font Awesome 5

#はじめに
この記事はプログラミングをはじめたばかりの素人が、できたことをメモするのに利用しています。
内容には誤りがあるかもしれません。

CDNの利用については沢山あったのですが、Laravel-mixを使う方法はあまりなかったので書いてみました。


#インストールするパッケージについて
Font Awesomeには大きく以下の2つのパッケージがある。

①@fortawesome/fontawesome-free
②@fontawesome-svg-core

####違いについて
||インストールの仕方|特徴|
|:---|:---:|:---:|
|@fortawesome/fontawesome-free|全アイコンをインストール|すぐに使える|
|@fontawesome-svg-core|指定のアイコンのみインストール|APIで詳細に制御できる|

#使用方法① @fortawesome/fontawesome-freeパッケージの利用
ターミナルを起動。

```CSS
npm install @fortawesome/fontawesome-free --save
```

 --saveはパッケージのインストール時、package.json の dependencies※ に追加してくれる機能。npm 5.0以降は不要。
※ dependenciesはアプリの実行時に必要なパッケージ。ローカルインストール。


resorces>js>ディレクトリに新しくfontawesome.jsファイルを作成し必要なデータをインポートする。

```CSS:fontawesome.js
import "@fortawesome/fontawesome-free/js/fontawesome";
import "@fortawesome/fontawesome-free/js/brands";
import "@fortawesome/fontawesome-free/js/solid";
import "@fortawesome/fontawesome-free/js/regular";
```

####LightとDuotoneは、フリー版では選択できない。

次に、resources>jsのapp.jsに以下を追記。

```CSS:app.js
require("./fontawesome");
```

ターミナルを再度起動し、以下のどちからを行う。

```CSS
npm run dev または npm run watch-poll
```

以上でインストールは終了です。


#使用方法② @fontawesome-svg-coreパッケージの利用

ターミナルを起動。
以下を上から順に行う。
ただし、npm install @fortawesome/fontawesome-svg-core以外は必要なものだけインストールする。

```CSS
npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/free-solid-svg-icons --save-dev
npm install @fortawesome/free-regular-svg-icons --save-dev
npm install @fortawesome/free-brands-svg-icons --save-dev
```

 --save-devはパッケージのインストール時、package.json の devDependencies※ に追加してくれる機能。
※ devDependenciesはアプリの開発時に必要なパッケージ。ローカルインストール。

resorces>js>ディレクトリに新しくfontawesome.jsファイルを作成し必要なデータをインポートする。
※この方法では{ }で指定したアイコンしか使えません。


```CSS:fontawesome.js
import { library, dom } from "@fortawesome/fontawesome-svg-core";
import { faFacebookF } from "@fortawesome/free-brands-svg-icons";
import { faInstagramSquare } from "@fortawesome/free-brands-svg-icons";
import { faEnvelope } from "@fortawesome/free-regular-svg-icons";

library.add(
  faFacebookF,
  faInstagramSquare,
  faEnvelope
  );

dom.watch();
```

####記述の内容

```CSS
import { library, dom } from "@fortawesome/fontawesome-svg-core";
```

この記述で、fontawesome-svg-coreモジュールからlibraryとdomをインポートしてスコープに加えています。

```CSS
import { faFacebookF } from "@fortawesome/free-brands-svg-icons";
```
この記述で、Bransモジュールの中からフェイスブックのブランドアイコンを指定して取得してます。


```CSS
import { faFacebookF,faInstagramSquare } from "@fortawesome/free-brands-svg-icons"
```

同じモジュールから複数取得する場合は、上記のような記述もできます。

```CSS
library.add(
  faFacebookF,
  faInstagramSquare,
  faEnvelope
  );
```

この記述で、libraryに利用するアイコンを登録。


```CSS
dom.watch();
```

この記述で、domを監視し、iタグで指定したアイコンをsvgに置き換えます。


次に、resources>jsのapp.jsに以下を追記。

```CSS:app.js
require("./fontawesome");
```

以上でインストールは終了です。

#インストール後の使用方法

HTMLやBladeテンプレート内で以下のように記述して使用。

```HTML
<i class="fab fa-apple"></i>
<i class="fas fa-shopping-cart"></i>
<i class="far fa-heart"></i>
```
																																
fab = Brands Style
fas = Solid Style
far = Regular Style を表します。

アイコンの種類や表記については、以下をご確認ください。
https://fontawesome.com/icons?d=gallery

#その他参考サイト

https://saruwakakun.com/html-css/basic/font-awesome