web-dev-qa-db-ja.com

Laravel 5.7 + Font Awesome

Font AwesomeツールキットをLaravel 5.7に含めようとしています。

これらは私が取ったステップです：

1）npm install --save-dev @fortawesome/fontawesome-freeを実行します

2）node_modules/のフォルダーを確認すると、すべてが正常に見えます。

$fa-font-path: "../webfonts";

// Bootstrap
@import '~bootstrap/scss/bootstrap';
@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
@import '~@fortawesome/fontawesome-free/scss/solid.scss';
@import '~@fortawesome/fontawesome-free/scss/regular.scss';
@import '~@fortawesome/fontawesome-free/scss/brands.scss';

3）その後、私は走った...

npm run development -- --watch

4）public/fonts/vendor/@fortawesome/fontawesome-free/にファイルが表示されます。

ただし、ブラウザにアクセスすると、アイコンは次のようになります。

down_icon

laravel-5npmfont-awesomelaravel-mixlaravel-5.7
11
Nico

Laravel 5.7、5.8、6.0+およびFont Awesome 5（The Right Way）

webpack.mix.js 設定をビルドします。

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

npm などのパッケージマネージャーを介して Font Awesome の最新の無料バージョンをインストールします。

npm install @fortawesome/fontawesome-free --save

これで、この依存関係エントリは package.json にあるはずです。

// Font Awesome
"dependencies": {
    "@fortawesome/fontawesome-free": "^5.11.2",

メインSCSSファイルで、 / resources/sass/app.scss 1つ以上のスタイルをインポートします。

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

資産をコンパイルし、縮小された、すぐに使用できるビルドを作成します。

npm run production

最後に、Bladeテンプレート/レイアウトで生成されたCSSファイルを参照します。

<link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}">
32
Karl Hill

以下のようにwebpack.mix.js構成を更新します。

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

mix.setPublicPath('public');
mix.setResourceRoot('../');

端末で「npm run dev」と入力し、Enterキーを押します

6
MUHAMMED IQBAL PA