如何在 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";

我试过  和  但它只是像下面这样显示，有人知道如何正确地做到这一点吗？

Answer 1

我建议你试试这个

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

require('./fontawesome');

现在运行npm run dev编译

然后您可以在您的视图中使用所需的图标

<i class="fas fa-*">

Answer 2

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

app.scss

添加这一行：

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

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

然后

npm run watch

Answer 3

首先将所有 fontawesome-icons 导入您的 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';

其次，也是最重要的 您错过的是将网络字体复制到您的 public 文件夹 。在你webpack.mis.js下面附加这个。

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

Answer 4

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

安装最新的免费版本Font Awesome via a package manager like npm。

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 template/layout 中引用您生成的 CSS 文件。

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

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

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

Answer 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 之后，现在我看到的图标是 

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

How to use Font Awesome 5 icons in Laravel 6

laravel

font-awesome

fontawesome-4.4.0

font-awesome-5

laravel-6

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

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