如何在Laravel 6中使用字体5图标

我已经在我的包.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";

---

我尝试了

和

，但它如下所示，有人知道如何正确执行此操作

---

我建议你试试这个

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

在

resources/assets/js

文件夹中，创建一个新文件

fontasome.js

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

import fontawesome from '@fortawesome/fontawesome';

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

fontawesome.library.add(fas);

在

resources/assets/js/app.js

要求（'./font'）

现在运行

npm运行dev

进行编译

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

<i class="fas fa-*">

---

正如您所说，您已经安装了

font-awesome

软件包

app.scss

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

添加此行：

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

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

然后

npm run watch

---

首先导入你的

app.scss中的所有
font图标

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

其次，您错过的最重要的一点是将webfonts复制到您的公用文件夹中。在您的
webpack.mis.js中
将此附加到下面

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

Laravel 6和7使用字体Awesome 5（正确的方式）
构建您的配置

mix.setResourceRoot（“../”；
js（'resources/js/app.js'，'public/js'）
.sass（'resources/sass/app.scss'，'public/css'）；

通过软件包管理器安装的最新免费版本，如

这个依赖项现在应该在您的应用程序中

//字体很棒
“依赖性”：{
“@fortawesome/fontawesome免费”：“^5.15.3”，

在主SCSS文件中，导入一个或多个样式

//字体很棒
@导入“~@fortawesome/fontawesome free/scss/fontawesome”；
@导入“~@fortawesome/fontawesome free/scss/regular”；
@导入“~@fortawesome/fontawesome free/scss/solid”；
@导入“~@fortawesome/fontawesome free/scss/brands”；

编译您的资产并生成一个小型的、可生产的构建

npm run production

最后，在刀片模板/布局中引用生成的CSS文件



如何在Laravel8中使用LaravelMix6安装FontAwesome5（正确的方法）
我的解决方案：

从文档：

npm安装——免费保存@fortwome/fontwome

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

从'@fortwome/fontwome free/js/all.js'导入fontwome；

在
npm run watch
之后，现在我看到的图标是
你用过
npm
吗？@amitsenjalia那是我的软件包上的。json我只是
npm安装
然后你就安装了
npm安装——把dev@fortwomesome/fontawome免费的保存下来吧？对吗？@amitsenjalia是的，先生，事实上，字体awome已经是我了在my node_modules folder中，您应该在
app.scss
文件中提供
solid.scss
路径。这一次，它显示的是none Sir，已经检查过元素。字体awesome存在，但不显示任何内容。@gecko您应该在导入路径中添加
fontawesome free
，它会像上面的图像一样返回。是用于所有图标的吗要导入每个图标？我需要所有图标您只需要导入应用程序中所需的图标。此方法应该可以正常工作。嗯。因此，每当我有另一个图标时，我都需要添加图标。谢谢您的时间，先生，但我需要所有图标，这样，如果我有另一个图标，我就不需要指定。这是唯一对我有效的解决方案，尽管到目前为止e dependency显示了
^5.12.1
，但这只是一个小细节。我的安装要正确编译，关键是要运行
npm install@fortawesome/fontawesome free--save
。这一步至关重要。