javascript 使用 npm 安装 font awesome 5 以使用 scss
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49304017/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Install font awesome 5 with npm for scss usage
提问by Anders
like title says, I can not install font awesome 5 with npm for scss purposes.
就像标题所说的那样，我无法为 scss 目的使用 npm 安装 font awesome 5。
Trying to install version 5
尝试安装版本 5
Accoring to https://fontawesome.com/how-to-use/use-with-node-js
根据https://fontawesome.com/how-to-use/use-with-node-js
npm i --save @fortawesome/fontawesome
npm i --save @fortawesome/fontawesome
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.
查看 node_modules 中的安装，我看不到要连接的 scss 文件。我尝试在我的 app.scss 文件中包含 style.css 文件，但没有奏效。
My setup for version 4:
我的版本 4 设置：
package.json
"font-awesome": "^4.7.0",
包.json
"font-awesome": "^4.7.0",
app.scss
@import "node_modules/font-awesome/scss/font-awesome.scss";
应用程序.scss
@import "node_modules/font-awesome/scss/font-awesome.scss";
Usage
<i className="fa fa-save icon controlItem"></i>
用法
<i className="fa fa-save icon controlItem"></i>
Easy as pie. How can I achieve this with version 5?? Am I using the wrong package?
易如反掌。我怎样才能用第 5 版实现这一点？我是否使用了错误的软件包？
UPDATE
更新
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
显然，仅使用 @fortawesome/fontawesome 还不够。包已被拆分，因此您还必须选择
npm install --save @fortawesome/fontawesome-free-regular
仍然我没有成功导入它
回答by Ru Chern Chong
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
In your app.jsor equivalent Javascript file,
在您的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)
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.
对于用法，类名的使用方式略有变化。请参阅 Fontawesome 站点上的图标以获取“完整”类名称。
Example
例子
<i class="fas fa-chevron-left"></i>
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.
尽管将所有 3 种字体变体添加到项目中的想法似乎很方便，但请注意这会在构建/编译项目时降低性能。因此，强烈建议您添加所需的字体而不是所有字体。
回答by Andy
Somehow including fonts in javascript doesn't feel right to me, it's a font and it should belong in css, so here is how to install it using scss:
不知何故，在 javascript 中包含字体对我来说并不合适，它是一种字体，它应该属于 css，所以这里是如何使用 scss 安装它：
npm install --save @fortawesome/fontawesome-free- add
@import '~@fortawesome/fontawesome-free/css/all.min.css'in your app.scss file - now include app.css to your head and tadaa done
npm install --save @fortawesome/fontawesome-free@import '~@fortawesome/fontawesome-free/css/all.min.css'在你的 app.scss 文件中添加- 现在将 app.css 包含在你的头上，tadaa 就完成了
回答by Md Mazedul Islam Khan
In case if you'd like to extract all the Font Awesome specific Javascript files to the vendor.jsusing Laravel Mix, you'll need to only extract the packages to the extract()method as an array. You won't even need to use the fontawesome.library.add()method to add support for the fonts. This will help you to manage the vendor specific file cache in future.
如果您想将所有 Font Awesome 特定的 Javascript 文件提取到vendor.js使用 Laravel Mix，您只需将包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'
]);
回答by Sam Willis
My understanding of FontAwesome 5 is that they use javascript to add inline SVGs to the DOM.
我对 FontAwesome 5 的理解是他们使用 javascript 将内联 SVG 添加到 DOM。
Take a look at this article: SVG with JS
看看这篇文章：SVG with JS
Rather than compiling an scss file, you just need to include this javascipt one: fontawesome-all.js, any icons you add to your HTML should then be converted to SVGs automatically.
而不是编译一个 scss 文件，你只需要包含这个 javascipt one: fontawesome-all.js，你添加到 HTML 的任何图标都应该自动转换为 SVG。
