80

我尝试使用 Laravel Mix 安装 Font Awesome，但在执行时run npm dev我收到以下消息：

ERROR Failed to compile with 1 errors
in ./~/font-awesome/scss/font-awesome.scss 模块构建失败：/** ^ Invalid CSS after "...load the styles": expected 1 selector or at-规则，是 /var/www/html/blog/node_modules/font-awesome/scss/font-awesome.scss 中的“var content = requi”（第 1 行，第 1 列）

我删除了文件中的注释并尝试更改字体路径，但并没有解决问题。

webpack.mix.js

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .copy('node_modules/font-awesome/fonts/', 'public/fonts')
   .sass('node_modules/font-awesome/scss/font-awesome.scss', 'public/css')
   .version();

fontawesome.scss

@import "variables";
@import "mixins";
@import "path";
@import "core";
@import "larger";
@import "fixed-width";
@import "list";
@import "bordered-pulled";
@import "animated";
@import "rotated-flipped";
@import "stacked";
@import "icons";
@import "screen-reader";

_variable.scss

// Variables
// --------------------------

$fa-font-path:        "../fonts" !default;
$fa-font-size-base:   14px !default;
$fa-line-height-base: 1 !default;
// $fa-font-path:        "//netdna.bootstrapcdn.com/font-awesome/4.7.0/fonts" !default; // for referencing Bootstrap CDN font files directly
$fa-css-prefix:       fa !default;
$fa-version:          "4.7.0" !default;
$fa-border-color:     #eee !default;
$fa-inverse:          #fff !default;
$fa-li-width:         (30em / 14) !default;
// Continue...
4

13 回答 13

127

要安装 font-awesome，你首先应该使用 npm 安装它。所以在你的项目根目录中输入：

npm install font-awesome --save

（当然我假设你已经安装了 node.js 和 npm。你已经npm install在你的项目根目录中完成了）

然后编辑resources/assets/sass/app.scss文件并在顶部添加这一行：

@import "node_modules/font-awesome/scss/font-awesome.scss";

现在您可以执行以下操作：

npm run dev

这会在正确的文件夹中构建资源的未缩小版本。如果你想缩小它们，你可以运行：

npm run production

然后你就可以使用字体了。

于 2017-05-06T11:14:54.793 回答
108

对于Font Awesome 5(webfont with css)和Laravel mixin为 font awesome 5 添加包

npm i --save @fortawesome/fontawesome-free

并在app.scss 或您的自定义 scss 文件中导入font awesome scss

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

编译您的资产 npm run dev或npm run production将您编译的 css 包含到布局中

于 2018-04-12T07:33:08.623 回答
76

如何在 Laravel 5.3 - 5.6 中安装 Font Awesome 5（正确的方法）

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

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

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

通过像 npm 这样的包管理器安装最新的免费版Font Awesome 。

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

这个依赖项现在应该在你的package.json中。

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

在您的主 SCSS 文件/resources/assets/sass/app.scss中，导入一种或多种样式。

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

如何在 Laravel 8 中使用 Laravel Mix 6 安装 Font Awesome 5（正确的方法）

https://gist.github.com/karlhillx/89368bfa6a447307cbffc59f4e10b621

于 2018-04-08T10:06:51.540 回答
38

这适用于使用 Laravel 5.7（及更高版本）和 Fontawesome 5.3 的新用户

npm install @fortawesome/fontawesome-free --save

并在 app.scss

@import '~@fortawesome/fontawesome-free/css/all.min.css';

跑

npm run watch

在布局中使用

<link href="{{ asset('css/app.css') }}" rel="stylesheet">
于 2018-10-10T07:11:53.087 回答
16

对于 Laravel >= 5.5

  • 跑npm install font-awesome --save
  • 加入@import "~font-awesome/scss/font-awesome.scss";_resources/assets/saas/app.scss
  • 运行npm run dev（npm run watch或什至npm run production）
于 2017-11-06T17:12:45.243 回答
7

我正在使用 Laravel 5.5.14，但以上都不适合我。所以这是我为使其工作而采取的步骤。

1.使用npm安装font-awesome：

   npm install font-awesome --save

2.通过在您的webpack.mixin.js

mix.copyDirectory('node_modules/font-awesome/fonts', 'public/fonts/font-awesome');

3.打开您的 app.scss 以指定您的 node_modules 中字体的路径以及用于编译的相对路径：

$fa-font-path: "../fonts/font-awesome" !default;
@import "~font-awesome/scss/font-awesome.scss";
于 2018-01-05T14:47:08.410 回答
6

首先使用npm安装fontawsome

npm install --save @fortawesome/fontawesome-free

添加resources\sass\app.scss

// Fonts
@import '~@fortawesome/fontawesome-free/scss/fontawesome';

并添加到resources\js\app.js

require('@fortawesome/fontawesome-free/js/all.js');

然后运行

npm run dev

或者

npm run production
于 2020-03-03T23:11:47.430 回答
4

Laravel 7 的解决方案

  1. 安装 font-awesome 库。
npm install font-awesome --save
  1. 安装库后。打开以下文件并粘贴给定的代码

<you_project_location>/resources/sass/app.scss

@import "~font-awesome/scss/font-awesome";
  1. 打开以下文件并粘贴给定的代码

<you_project_location>/webpack.mix.js

mix.setResourceRoot("../");
  1. 根据您的环境执行命令。

npm 运行开发

或者

npm 运行生产

无需将字体文件夹复制粘贴到公用文件夹，全部自动处理。

于 2020-07-24T10:57:05.190 回答
4

您使用的路径不正确，您可以打开 node_module 并找到 font-awesome 的路径。使用可以使用 js 或 svg 字体，但我更喜欢 css 样式。

首先使用这个命令安装 font-awesome-free npm install --save-dev @fortawesome/fontawesome-free

之后你可以这样做

@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/brands";

我复制下面的字体路径这是可选的

.copy('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/fonts');

最后只运行脚本 npm run dev或npm run watch在 laravel

于 2019-03-05T20:17:46.450 回答
3

我最近为 Laravel5.6 写了一篇关于它的博客。博客链接是https://www.samundra.com.np/integrating-font-awesome-with-laravel-5.x-using-webpack/1574

步骤与上述类似。但就我而言，我必须做一些额外的步骤，比如在“public”目录中配置 webfonts 到 font-awesome 的路径。在 Laravel mix 等中设置资源根目录。您可以在博客中找到详细信息。

我将链接留在这里，以便对上述解决方案不起作用的人有所帮助。

于 2018-05-23T15:30:32.113 回答
1 
npm install font-awesome --save

在路径前添加 ~/

@import "~/font-awesome/scss/font-awesome.scss";
于 2018-06-07T08:16:57.893 回答
-1

我发现上面的所有答案都不完整，下面是让它工作的确切步骤。

  1. 我们使用 npm 来安装包。为此，请打开控制台并转到您的 Laravel 应用程序目录。输入以下内容：

    npm install font-awesome --save-dev

  2. 现在我们必须将需要的文件复制到 public/css 和 public/fonts 目录。为此，请打开 webpack.mix.js 文件并添加以下内容：

    mix.copy('node_modules/font-awesome/css/font-awesome.min.css', 'public/css'); mix.copy('node_modules/font-awesome/fonts/*', 'public/fonts');

  3. 运行以下命令以执行 Laravel Mix：

    npm run dev

  4. 在应用程序布局文件 (resources/views/layouts/app.blade.phpapp.blade.php) 中添加 Font Awesome 的样式表：

    <link href="{{ asset('css/font-awesome.min.css') }}" rel="stylesheet" />

  5. 在模板中使用字体真棒图标，例如

    <i class="fa fa-address-book" aria-hidden="true"></i>

我希望它有帮助！

于 2020-07-03T13:37:49.157 回答
-4

尝试在您的 webpack.mix.js 中添加“*”

.copy('node_modules/font-awesome/fonts/*', 'public/fonts')
于 2017-04-17T13:09:02.970 回答