使用npm安装字体awesome 5以获取scss用法

Question

就像标题所说的那样,我无法使用npm安装字体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的设置:

的package.json "font-awesome": "^4.7.0",

app.scss @import "node_modules/font-awesome/scss/font-awesome.scss";

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

非常简单.我如何用版本5实现这一点？我使用了错误的包装吗？

---

UPDATE

显然,只使用@ fortawesome/fontawesome并不是真的.这些包已被拆分,因此您还必须选择 npm install --save @fortawesome/fontawesome-free-regular Still我没有成功导入它

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

Answer 2

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

1. npm install --save @fortawesome/fontawesome-free
2. @import '~@fortawesome/fontawesome-free/css/all.min.css'在你的 app.scss 文件中添加
3. 现在将 app.css 包含在你的头上，tadaa 完成

Answer 3

添加包；

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>

。