FontAwesomをしようするとwebアイコンフォトを簡単に使用することができます。
実装環境
- PHP7.3
- Laravel 6.20.26
前提条件
Font Awesomeをインストールするのにnpmをしようするのでnpmはインストールしていることを前提としています。
ターミナルでnpm -vとするとインストールされていたらバージョンが出るので確認してみてください。
実装手順
- FontAwesomをsインストール
- インストールしたFont awesomeが使えるよう必要なデータをインポートする
1.FontAwesomをインストール
ターミナルに移動して npm install --save-dev @fortawesome/fontawesome-freeを実行することでパッケージをインストールすることができます。
$npm install --save-dev @fortawesome/fontawesome-free
2. インストールしたFont awesomeが使えるよう必要なデータをインポートする
resources/js配下にfontawesome.jsファイルを作成して必要なデータをインポートする。
fontawesome.js
1 import "@fortawesome/fontawesome-free/js/fontawesome";
2 import "@fortawesome/fontawesome-free/js/brands";
3 import "@fortawesome/fontawesome-free/js/solid";
4 import "@fortawesome/fontawesome-free/js/regular";
fontawesome.jsファイルにデータを入れたら次はresources/js配下app.jsがあるのでそちらに下記を記入する。
app.js
require("./fontawesome");
app.jsに記入しておくとresources/views/layouts/app.blade.phpに下記のような記述があるので読み込んでくれる
app.blade.php
<script src="{{ asset('js/app.js') }}" defer></script>
これで準備は完了です。
使用方法
下記のようにすると簡単にwebアイコンフォトを使用することができます。
<i class="fas fa-camera fa-3x"></i>
今回はカメラのアイコンフォトを使用しました。
今回はJavaScripでパッケージを読み込んだのですがCSSでも読み込むことができます。