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

Posted 2023-02-16

【中文标题】如何在 Laravel 6 中使用 Font Awesome 5 图标

【英文标题】：How to use Font Awesome 5 icons in Laravel 6

【发布时间】：2020-03-25 15:41:12

【问题描述】：

我已经在我的 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>，但它只是如下所示，有人知道如何正确执行此操作吗？

【问题讨论】：

你用过npm吗？

@AmitSenjaliya 那在我的 package.json 我只是 npm install

然后你已经安装了npm install --save-dev @fortawesome/fontawesome-free 对吧？还是不行？

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

您应该在app.scss 文件中提供solid.scss 路径。

【参考方案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

【讨论】：

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

【参考方案2】：

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

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

【参考方案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-*">

【讨论】：

是针对所有图标先生还是我需要导入每个图标？我想要所有的图标

您只需要导入应用程序中需要的图标。这种方法应该可以正常工作。

嗯。所以每当我有另一个图标时，我都需要添加图标。感谢您抽出时间先生，但我想要所有图标，这样如果我有另一个我不需要指定。

【参考方案4】：

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

app.scss

添加这一行：

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

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

然后

npm run watch

【讨论】：

这次它没有显示，先生，已经检查了元素。 font-awesome 存在，但没有显示。

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

它又像上图一样返​​回。

【参考方案5】：

我的解决方案：

来自文档：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>