更新

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实现这一点？我使用了错误的包装吗？

<小时/>

更新

显然，只使用@ 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网站上的图标，了解＆＃34;完整＆＃34;班级名称。

实施例

<i class="fas fa-chevron-left"></i>

虽然将所有3种字体添加到项目中的想法似乎是一件很方便的事情，但要注意这会在构建/编译项目时降低性能。因此，强烈建议您添加所需的字体而不是所有字体。

Answer 2

以某种方式在JavaScript中包含字体对我来说不合适，它是一种字体，应该属于CSS，因此这里是如何使用scss安装它的方法：

npm install --save @fortawesome/fontawesome-free
在您的app.scss文件中添加@import '~@fortawesome/fontawesome-free/css/all.min.css'
现在将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>

.

Answer 4

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

看一下这篇文章：SVG with JS

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

Answer 5

如果您想使用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'
    ]);

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

尝试安装第5版

我对版本4的设置：

更新

5 个答案: