Laravel Voyagerでfont-awesomeのアイコンを使用する

3447 ワード
Voyager Laravel FontAwesome Laravel テキストリンク

font-awesome等に慣れてしまうと、Voyagerで用意されてる200ぐらいのアイコンでは物足りないカラダにされてしまいます。

幸いVoyagerには additional_css と additional_js という設定値が存在しますので、ここにfont-awesomeを入れていきましょう。

準備

font-awesome インストール

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

laravel Mix で font-awesome.css を作る

resources\sass\font-awesome.scss
// Font Awesome
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/brands';
webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .sass('resources/sass/font-awesome.scss', 'public/css');

$ npm run dev

参考：https://qiita.com/algi_nao/items/5d2befae8f367050ae7f

作った font-awesome.css を Voyager に取り込む

config\voyager.php
    'additional_css' => [
        'css/font-awesome.css',
    ],

設定

準備が済んだら font-awesome が使えるようになります。

BREAD の「アイコン」欄に、font-awesome のクラス名を記述すればOKです。

font-awesome のアイコンが表示できます

もちろんサイドメニューのアイコンも（メニュービルダーで設定）

この通り。

補足

もしAlias切って
サブディレクトリで動かしてるプロジェクトの場合は、
font-awesome.css がフォントファイルを見つけられずに
アイコンが豆腐になってしまいます。

そのような場合は
こちらの記事を参考に。