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

Question

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

http://www.another-example... 
https://example1.com
https://www.example.com

并将其导入到我的 app.scss

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

---

我尝试了@import "~font-awesome/scss/font-awesome.scss"; 和<i class="fa fa-edit"></i>，但它仅显示如下，有人知道如何正确执行此操作？

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

第二，最重要的是，您错过的是将网络字体复制到公用文件夹。在您webpack.mis.js中添加以下内容。

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

Answer 4

使用Font Awesome 5（正确方式）的Laravel 6.x +

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

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

通过Font Awesome之类的软件包管理器安装npm的最新免费版本。

npm install @fortawesome/fontawesome-free --save

此依赖项条目现在应该在您的package.json中。

// Font Awesome
"dependencies": {
    "@fortawesome/fontawesome-free": "^5.12.0",

在您的主要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') }}">

Answer 5

我的解决方案：

来自文档：https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers

db.js

然后，在 app.js 中，我导入了“ all.js”：

npm install --save @fortawesome/fontawesome-free

在import fontawesome from '@fortawesome/fontawesome-free/js/all.js';之后，我看到的图标为npm run watch