如何在Laravel Mix中安装Font Awesome？

Question

我尝试使用 Laravel Mix 安装 Font Awesome，但在执行 run npm dev 命令时出现以下错误信息：

ERROR Failed to compile with 1 errors
error in ./~/font-awesome/scss/font-awesome.scss Module build failed: /** ^ Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi" in /var/www/html/blog/node_modules/font-awesome/scss/font-awesome.scss (line 1, column 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...

- Lucas Lopes

---

请注意问题中的 mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); 部分。 - M at

Answer 1

在安装 font-awesome 前，您首先需要使用 npm 进行安装。因此，在您的项目根目录中键入以下命令：

npm install font-awesome --save

< p > < em >（当然，我假设您已经安装了node.js和npm。也在项目根目录下执行了< code > npm install ） < p > 然后编辑< code > resources / assets / sass / app.scss 文件，在顶部添加此行：

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

现在你可以做例如：

npm run dev

这将在正确的文件夹中构建未经压缩的资源。如果您想要对它们进行压缩，您应该运行：

npm run production

然后你可以使用字体。

- Kornel

---

在Laravel 5.5中，这段代码对我有效：@import "~font-awesome/scss/font-awesome.scss"; - Adam Lundrigan

yarn is much faster than npm so you can do yarn add font-awesome --save - avn

曾经我遇到过一个fontawesome的问题。尝试了所有方法，下载、npm安装等等。但后来发现前端开发人员在css中为每个标签写了*{}的代码，于是我删除了那段代码，然后fontawesome就完美地工作了。 - Ozal Zarbaliyev

请注意，这不会安装最新的免费版本的 Font Awesome。它只会安装版本 + font-awesome@4.7.0。 - Karl Hill

如果在 webpack.mix.js 中使用 .copy('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/fonts');，然后运行 npm run dev，对我来说它是有效的。 - Yohanim

Answer 2

为 Font Awesome 5（带有 CSS 的 Web 字体） 和 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';

编译资源并将编译后的css包含到布局中。使用npm run dev或npm run production命令进行编译。

- Karan

---

谢谢，这个方法差不多对我有用。我只需要改变行的顺序并将 @import '~@fortawesome/fontawesome-free/scss/fontawesome'; 移动到 font-awesome 的导入顶部即可。 - Don40

点赞！你真的需要这4个文件吗？我认为 ~@fortawesome/fontawesome-free/scss/fontawesome 应该足够了。 - PirateApp

Answer 3

如何以正确的方式在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

- Karl Hill

---

我还必须在 /resources/assets/sass/app.scss 中包含 CSS（前缀导入为@）：import "@fortawesome/fontawesome-free/scss/fontawesome.scss"; import "@fortawesome/fontawesome-free/scss/solid.scss"; - Wotuu

如果没有在我的webpack.mix.js中加入".copy('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/webfonts')"，我就无法让它正常工作。 - willjohnathan

这里也是一样，我不得不把 webfonts 文件夹复制到公共文件夹中，否则会出现 404 找不到错误。应该更新答案，我觉得是这样。 - Eleazar Resendez

在 Laravel 7.4 中，Webpack 配置已经构建完成，因此我只需要运行 npm 命令，然后将其添加到 scss 文件中，最后运行 npm run whatever-you-want-here 即可完成所有操作。 - MR_AMDEV

Answer 4

这是给使用 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">

- Ramesh Navi

---

由于 Laravel 5.7 是当前的稳定版本，因此这应该排在首位。我尝试了上面提到的所有技巧，但除了这个方法外，其他都没有奏效。我所缺少的是将链接部分放入我的标题中。非常感谢！ :) - wenzzzel

这应该是被接受的答案，因为其他答案只适用于较旧版本的 Laravel。 - Armin

尝试使用此方法加载字体时仍会收到“/webfonts/fa-solid-900.woff2 net :: ERR_ABORTED 404”错误。渲染页面上图标的代码是什么样子的？ - Alex Godbehere

我还需要在 webpack.mix.js 中复制字体：.copy('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/webfonts') - Dennis van Dalen

这在最新版本的FA和Laravel 5.5中运行良好，谢谢！ - tavernhell

Answer 5

适用于 Laravel >= 5.5

• 运行npm install font-awesome --save
• 在resources/assets/saas/app.scss中添加@import "~font-awesome/scss/font-awesome.scss";
• 运行npm run dev（或者npm run watch甚至npm run production）

- rap-2-h

Answer 6

我正在使用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";

- Hyder B.

---

$fa-font-path: "../../../public/fonts/font-awesome" !default; 这将起作用，因为我们将提供字体目录的相对路径。 - user7366809

为什么我们不能在这里使用绝对路径，例如 "/fonts/font-awesome" !default;？ - Dr. House

请注意，这不会安装最新的免费版Font Awesome。它将只安装 version + font-awesome@4.7.0。 - Karl Hill

Answer 7

Laravel 9 和fontawesome 6.1

composer create-project laravel/laravel:^9 laravel-9

cd laravel-9

npm i --save-dev @fortawesome/fontawesome-free@^6.1.0

创建文件 resources/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";

将 webpack.mix.js 替换为：

const mix = require('laravel-mix');

// set path to laravel public directory
//mix.setPublicPath('public');

// path to laravel public directory from public/css/app.css
mix.setResourceRoot("../");

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

将其添加到您的视图中。

<script src="{{ mix('js/app.js') }}"></script>
<link rel="stylesheet" href="{{ mix('css/app.css') }}" />

注意：正确操作后，字体文件会自动复制到public目录中。您无需像许多答案中所示那样手动复制它们。

注意：如果您的Laravel网站位于子文件夹中（http://domain/site/），请确保在config/app.php中添加mix_url。

    // laravel mix assets url
    'mix_url' => env('APP_URL', null),

- 8ctopus

Answer 8

Laravel 7 的解决方案

1. 安装 font-awesome 库。

npm install font-awesome --save

安装完库后，在以下文件中打开并粘贴给定代码：

/resources/sass/app.scss

@import "~font-awesome/scss/font-awesome";

3. 打开下面的文件并粘贴给定的代码

<你的项目位置>/webpack.mix.js

mix.setResourceRoot("../");

4. 根据您的环境执行以下命令。

npm run dev

或者

npm run production

无需复制粘贴字体文件夹到公共文件夹，所有内容将自动处理。

- Gaurav Porwal

---

请注意此答案中的 mix.setResourceRoot("../"); 非常有用。 - abenevaut

mix.setResourceRoot("../"); 像魔法一样奏效！谢谢。 - Emad Saeed

这应该被接受为答案，因为它适用于最新版本的Laravel，我今天刚刚进行了全新安装。mix.setResourceRoot("../");真是救命稻草！@abenevaut和@Emad Saeed应该点赞这个答案。 - Harvey Dobson

通过安装 font-awesome 包，您实际上会缺少一些字体，例如 solid。最好安装包含所有字体的 @fortawesome/fontawesome-free。 - 8ctopus

这实际上安装了旧版本的 Font Awesome 4.7.0。 - 8ctopus

Answer 9

首先使用npm安装Fontawesome

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

- Sakhri Houssem

Answer 10

您正在使用的路径不正确，您可以打开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');

最后只需在 Laravel 中运行脚本 npm run dev 或 npm run watch

- Farshad Fahimi