Javascript 使用npm安装font awesome 5以供scss使用

正如标题所说，我不能为scss的目的用npm安装FontAwesome5

正在尝试安装版本5 符合

npm i--save@fortawesome/fontawesome

查看node_模块中的安装，我没有看到要连接的scss文件。我尝试在app.scss文件中包含styles.css文件，但没有成功

我的版本4设置： package.json

“字体很棒”：“^4.7.0”，

app.scss

@import“node\u modules/font-awesome/scss/font-awesome.scss”

用法

容易极了。我如何用版本5实现这一点？？我用错包裹了吗？

更新
显然，仅仅使用@fortawesome/fontawesome是不够的。软件包已被拆分，因此您还必须选择
npm安装--save@fortawesome/fontawesome free regular

尽管如此，我还是没有成功地导入它
我对Font5的理解是，他们使用javascript将内联SVG添加到DOM中

看看这篇文章：

您不需要编译scss文件，只需要包含以下javascipt文件：
fontawesome all.js
，添加到HTML中的任何图标都应该自动转换为SVG

npm install --save-dev @fortawesome/fontawesome
npm install --save-dev @fortawesome/free-regular-svg-icons
npm install --save-dev @fortawesome/free-solid-svg-icons
npm install --save-dev @fortawesome/free-brands-svg-icons

在
app.js
或等效的Javascript文件中

import fontawesome from '@fortawesome/fontawesome'
import regular from '@fortawesome/free-regular-svg-icons'
import solid from '@fortawesome/free-solid-svg-icons'
import brands from '@fortawesome/free-brands-svg-icons'

fontawesome.library.add(regular)
fontawesome.library.add(solid)
fontawesome.library.add(brands)

在使用方面，类名的使用方式略有改变。请参考Fontawesome网站上的图标了解“完整”类名

范例

<i class="fas fa-chevron-left"></i>




尽管将所有3种字体添加到项目中似乎是一件方便的事情，但在构建/编译项目时一定要小心这会降低性能。因此，强烈建议您添加所需的字体，而不是所有字体。
如果您想使用Laravel Mix将所有特定于字体的Javascript文件提取到
vendor.js
，则只需将包作为数组提取到
extract（）
方法。您甚至不需要使用
fontawesome.library.add（）
方法来添加对字体的支持。这将帮助您在将来管理特定于供应商的文件缓存

mix.js('resources/assets/js/app.js', 'public/js')
    .extract([
        '@fortawesome/fontawesome',
        '@fortawesome/fontawesome-free-brands',
        '@fortawesome/fontawesome-free-regular',
        '@fortawesome/fontawesome-free-solid',
        '@fortawesome/fontawesome-free-webfonts'
    ]);

不知何故，在javascript中包含字体对我来说并不合适，它是一种字体，应该属于css，因此下面是如何使用scss安装它：

npm安装——免费保存@fortwome/fontwome
在app.scss文件中添加
@import'~@fortawesome/fontawesome free/css/all.min.css'
现在将app.css添加到您的头部，tadaa完成
添加包

npm install --save @fortawesome/fontawesome-free

并在app.scss中添加scss文件

$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";

@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "~@fortawesome/fontawesome-free/scss/regular.scss";

然后在html文件中引用图标

<i class="far fa-save"></i>



.
谢谢，尽管在我的5.0.8版本（npm 1.1.4版）中没有fontawesome-all.js。我不希望手动或使用url将其拉入。我和OP一样感到困惑，我已经成功导入了Font Awesome 5，就像您的示例中一样。现在我有一个问题，也许你知道答案：当编译我的
app.js
（使用Laravel Mix/webpack）时，输出文件约为2MB！我只导入了一个Font Awesome图标集（
fontawesome pro regular
），并将其添加到我的
app.js
中的
fontawesome.library
。既然他们声明
fontawesome.library
功能用于明确不导入所有图标，为什么文件会变得这么大？对不起，我对此不太确定。你必须和字体团队核实一下。他们最有资格解释这一点。@Flux我最近刚刚遇到了和你一样的问题。使用WebpackAweasome进行编译花费了很长时间！不再需要导入css或scss文件+1这些软件包已弃用。更改为：@fortwome/free brands svg icons@fortwome/free regular svg icons@fortwome/free solid svg icons