如何在 Laravel 6 中使用 Font Awesome 5 图标

Question

我已经在我的package.json中安装了Fontawesome。

"devDependencies": {
    "@fortawesome/fontawesome-free": "^5.11.2" ,
    //etc.
},
"dependencies": { "font-awesome": "^4.7.0" }

并将其导入到我的 app.scss 文件中

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

---

我尝试了 <i class="fa fa-edit"></i> 和 <i class="fas fa-edit"></i> 但是它们只显示如下，有人知道如何正确使用吗？

- schutte

---

你使用过 npm 吗？ - Amit Senjaliya

@AmitSenjaliya 这是在我的 package.json 文件中，我只需要运行 npm install 命令。 - schutte

然后你安装了 npm install --save-dev @fortawesome/fontawesome-free，对吗？还是没有？ - Amit Senjaliya

@AmitSenjaliya 是的先生，事实上 font-awesome 已经在我的 node_modules 文件夹中了。 - schutte

你应该在app.scss文件中提供solid.scss路径。 - Amit Senjaliya

Answer 1

Laravel 6 & 7使用 Font Awesome 5（正确方法）

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

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

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/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/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') }}">

如何在 Laravel 8 中使用 Laravel Mix 6 正确地安装 Font Awesome 5

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

- Karl Hill

---

这是唯一对我有效的解决方案，尽管现在依赖项显示为^5.12.1，但那只是一个小细节。我的安装能够正确编译的关键是运行npm install @fortawesome/fontawesome-free --save。这一步是至关重要的。 - Zeke

Answer 2

首先在您的app.scss中导入所有的fontawesome-icon。

@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.mis.js文件中添加以下内容。

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

- tempra

Answer 3

我建议你尝试这个。

npm install @fortawesome/fontawesome @fortawesome/fontawesome-free-solid -D

在 resources/assets/js 文件夹中，创建一个新文件 fontawesome.js。

在该文件中，您可以导入 fontawesome 和所有图标。

import fontawesome from '@fortawesome/fontawesome';

import fas from '@fortawesome/fontawesome-free-solid';

fontawesome.library.add(fas);

在resources/assets/js/app.js中，引入fontawesome。然后运行npm run dev进行编译。之后你就可以在视图中使用所需的图标了。

<i class="fas fa-*">

- thefabdev

---

这是针对所有图标吗，还是我需要导入每个图标？我想要所有的图标。 - schutte

你需要仅导入应用程序中所需的图标。这种方法应该可以正常工作。 - thefabdev

嗯，所以每当我有另一个图标时，我需要添加图标。感谢您的时间先生，但我希望拥有所有图标，这样如果我有另一个图标，我就不需要指定。 - schutte

Answer 4

我的解决方案：

从文档中获取链接：https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers

npm install --save @fortawesome/fontawesome-free

然后，在app.js中导入'all.js'：

import fontawesome from '@fortawesome/fontawesome-free/js/all.js';

npm run watch之后，现在我可以看到这些图标：<i class="fas fa-search"></i>

- novecentonove

Answer 5

正如你所说，你已经安装了font-awesome包。

app.scss

添加这行代码：

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

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

然后

npm run watch

- Amit Senjaliya

---

这次它显示为“none”，先生，已经检查元素了。font-awesome存在，但未显示。 - schutte

@gecko 你应该在导入路径中添加 fontawesome-free。 - Amit Senjaliya

它像上面的图像一样再次返回。 - schutte