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 / 5.8 +和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.8.2",

/resources/sass/app.scss在您的主要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键

Answer 3

如果您使用的是Vue，这对我有用-https://github.com/FortAwesome/vue-fontawesome

Answer 4

Laravel 5.7 / 5.8 + Font Awesome 2019安装指南 对于Laravel 5.7 / 5.8 +和Font Awesome 5

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

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

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

通过npm安装最新的免费版本Font Awesome。

  npm install @fortawesome/fontawesome-free –save

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

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

/resources/sass/app.scss在您的主要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依赖项

 npm install

让我们编译我们的资产并生成可用于生产的版本。

 npm run production

最后，在Blade模板/布局中引用生成的CSS文件。

<link type="text/css" rel="stylesheet" href="{{ asset('css/app.css') }}">