使用npm安装令人敬畏的5字体以用于scss [英] Install font awesome 5 with npm for scss usage
问题描述
就像标题中所说的那样，出于scss的目的，我无法使用npm安装真棒字体5.
like title says, I can not install font awesome 5 with npm for scss purposes.
根据 https://fontawesome.com/how-to-使用/与节点一起使用js
npm i --save @fortawesome/fontawesome
在node_modules中查看安装过程，我看不到任何要挂接的scss文件.我试图在我的app.scss文件中包含styles.css文件，但这没有用.
Looking through the installation in node_modules I see no scss file to hook up to. I tried including the styles.css file in my app.scss file but that did not work.
package.json
"font-awesome": "^4.7.0",
package.json
"font-awesome": "^4.7.0",
app.scss
@import "node_modules/font-awesome/scss/font-awesome.scss";
app.scss
@import "node_modules/font-awesome/scss/font-awesome.scss";
用法
<i className="fa fa-save icon controlItem"></i>
容易做馅饼.如何使用版本5实现此目标?我使用了错误的包裹吗?
Easy as pie. How can I achieve this with version 5?? Am I using the wrong package?
显然，仅使用@ fortawesome/fontawesome并不足够.软件包已拆分，因此您还必须选择
npm install --save @fortawesome/fontawesome-free-regular
仍然无法成功导入
Apparently, just using @fortawesome/fontawesome is not eanough. The packages have been split up so you also have to select
npm install --save @fortawesome/fontawesome-free-regular
Still I have no success importing it
推荐答案
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文件中，
In your app.js or equivalent Javascript file,
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网站上的图标，以获取完整"的类名.
For usage, there are slight changes to the way the class names are being used. Please refer to the icons on Fontawesome site for the "full" class names.
示例
<i class="fas fa-chevron-left"></i>
尽管将字体的所有3种变体添加到项目中的想法似乎很方便，但是请注意，这会在构建/编译项目时降低性能.因此，强烈建议您添加所需的字体而不是所有字体.
Although the idea of adding all the 3 variants of fonts into the project seems to be a convenient thing, do beware that this will slow performance when building/compiling your project. Thus, it is highly recommended that you add the fonts you need instead of everything.
这篇关于使用npm安装令人敬畏的5字体以用于scss的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
