Question

我在使用scss为我的Angular 4+项目添加font-awesome时遇到了问题。我已经尝试了这里给出的许多步骤：How to add font-awesome to Angular 2 + CLI project用于基于scss的项目，主要是将@import '~/../node_modules/font-awesome/scss/font-awesome';添加到styles.scss和$fa-font-path : '~/../node_modules/font-awesome/fonts';添加到variables.scss。事情是它编译并且似乎它正在工作，因为我至少得到一个图标应该是的块，而没有它我什么都没得到，但就是这样。我可以尝试在angular-cli中导入css文件，但我宁愿用scss方式来做。有没有人在一个有角度的4+项目中取得成功？

我发布了一个新主题，因为它似乎是Angular 4中的一个问题，而不是角度2，基于该帖子中的评论，该帖子已经过时了。

Answer 1

您可以通过指向样式中的字体文件

来执行此操作

// styles.scss
$fa-font-path: "../node_modules/font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';

或者正如其他人所提到的，您可以通过webpack加载

// angular-cli.json
"styles": [
    "../node_modules/font-awesome/scss/font-awesome.scss",
    "styles.scss"
]

Answer 2

有一种更简单的方法（无需复制文件夹，
在angular-cli json中添加一些内容，并在导入时使用“ node_modules”）。

以下是步骤：

照常安装FontAwesome软件包：

npm install --save @fortawesome/fontawesome-free

在您的styles.scss文件中添加以下行：

$fa-font-path: "@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/brands"; // OPTIONAL. Remove if you are not using this

另请注意，由于FontAwesome 5 fa与fas一样是considered
这意味着在html中使用fa时，您会看到实心（粗体）图标。
因此，请确保常规（非粗体）使用far而不是fa
字体，如果要从FontAwesome的早期版本升级。
（这可能需要您升级到Pro版本。）

Answer 3

Npm安装字体真棒，只需添加到.angular-cli.json文件中的样式，它就会为你捆绑。

Answer 4

这是您安装5.2.x版font-awesome的方式

npm install @fortawesome/fontawesome-free
将webfonts内的node_module/fortawesome/fontawesome-free文件夹复制到assets/scss/文件夹（或资产中的任何文件夹）
添加$fa-font-path: "webfonts"; to the styless.scss
最后将以下导入添加到styles.scss

@import“〜@ fortawesome / fontawesome-free / scss / fontawesome”;

@import“〜@ fortawesome / fontawesome-free / scss / solid”;

@import“〜@ fortawesome / fontawesome-free / scss / brands”；

还有另一种更好的方法documented，但这说明了如何在我的情况下将其添加为角度模块，我希望字体以最简单的方式完成其工作。

如何为angular 4+项目添加font-awesome

4 个答案: