使用 npm 安装字体真棒 5 用于 scss

Question

就像标题说的那样，我无法出于 scss 目的使用 npm 安装字体真棒 5。

尝试安装版本 5

符合 https://fontawesome.com/how-to-use/use-with-node-js

npm i --save @fortawesome/fontawesome

浏览node_modules中的安装，我没有看到要连接的scss文件。我尝试在我的 app.scss 文件中包含样式.css文件，但这不起作用。

我对版本 4 的设置：

包.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 实现此目的？我是否使用了错误的软件包？

---

更新

显然，仅仅使用@fortawesome/fontawesome并不是eanough。包已被拆分，因此您还必须选择 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 种字体变体添加到项目中的想法似乎很方便，但请注意，在构建/编译项目时这会降低性能。因此，强烈建议您添加所需的字体而不是所有字体。

Answer 2

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

1. npm install --save @fortawesome/fontawesome-free
2. 在 app.scss 文件中添加@import '~@fortawesome/fontawesome-free/css/all.min.css'
3. 现在包括应用程序.css到你的头和塔达完成

Answer 3

添加包;

npm install --save @fortawesome/fontawesome-free

并在您的应用程序中添加 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>

.

Answer 4

如果你想

使用Laravel Mix将所有Font Awesome特定的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'
    ]);

Answer 5

我对 FontAwesome 5 的理解是他们使用 javascript 将内联 SVG 添加到 DOM 中。

看看这篇文章： SVG with JS

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