javascript - 使用 npm 安装 font awesome 5 以供 scss 使用

Question

如标题所说，我无法使用 npm 安装 font awesome 5 以用于 scss。

正在尝试安装版本 5

根据https://fontawesome.com/how-to-use/use-with-node-js

npm i --save @fortawesome/fontawesome

查看 node_modules 中的安装，我看不到要连接的 scss 文件。我尝试在我的 app.scss 文件中包含 styles.css 文件，但这没有用。

我的版本 4 设置:

包.json "font-awesome": "^4.7.0",

应用程序.scss @import "node_modules/font-awesome/scss/font-awesome.scss";

用法 <i className="fa fa-save icon controlItem"></i>

简单易行。我怎样才能用第 5 版实现这一目标？我用错包了吗？

---

更新

显然，仅使用@fortawesome/fontawesome 是不够的。这些包已被拆分，因此您还必须选择 npm install --save @fortawesome/fontawesome-free-regular 我仍然没有成功导入它

Answer 1

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 种字体变体添加到项目中的想法似乎很方便，但请注意这会降低构建/编译项目时的性能。因此，强烈建议您添加所需的字体而不是所有字体。