Laravel 5.7 +字体真棒

Question

我正在尝试在Laravel 5.7中包含Font Awesome工具包.

这些是我采取的步骤:

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/.

但是,当我进入浏览器时,图标看起来像这样:

Answer 1

适用于Laravel 5.7+和Font Awesome 5

构建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导入一个或多个样式.

// 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') }}">

Answer 2

如下更新您的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