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 到 7.x 使用 Font Awesome 5（正确的方式）

构建您的 webpack.mix.js 配置。

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

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

安装最新的免费版本Font Awesome via a package manager like npm。

npm install @fortawesome/fontawesome-free --save-dev

此依赖项现在应该在您的 package.json 中。

// Font Awesome
"devDependencies": {
    "@fortawesome/fontawesome-free": "^5.15.3",

在您的主 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 template/layout 中引用您生成的 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' 并按回车键

Laravel 5.7 + 字体很棒

Laravel 5.7 + Font Awesome

laravel-5

npm

font-awesome

laravel-mix

laravel-5.7

Laravel 5.7 到 7.x 使用 Font Awesome 5（正确的方式）