如何在Angular 4+项目中添加font-awesome

Question

我在使用scss将font-awesome添加到我的Angular 4+项目时遇到了问题。我尝试了这里给出的许多步骤：如何将font-awesome添加到Angular 2 + CLI项目，对于基于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的方式来做。有人在angular 4+项目中成功过吗？

我在新主题中发布此帖子，因为根据那篇文章中的评论，这似乎是Angular 4的问题，而不是Angular 2，并且那篇文章已经过时了。

- jgerstle

---

{btsdaf} - Z. Bagley

我想在我的scss中导入它 - jgerstle

{btsdaf} - jgerstle

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"
]

- LLai

Answer 2

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

以下是步骤：

1. Install FontAwesome package as usual:

   npm install --save @fortawesome/fontawesome-free 
   

2. Add following lines to your styles.scss file:

   $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。这意味着如果在html中使用fa，您将看到实心（粗体）图标。因此，如果您要升级到早期版本的FontAwesome，请确保使用far而不是fa来获取常规（非粗体）字体。 （这可能需要您升级到专业版）。

- Just Shadow

Answer 3

使用npm安装font awesome，然后将其添加到.angular-cli.json文件中的样式中，它将为您打包。

- Jorawar Singh

---

当我这样做时，我遇到了相同的问题（显示方框而不是图标）。而且我更愿意将其放在我的scss文件中，而不是angular-cli中。 - jgerstle

{btsdaf} - Jorawar Singh

{btsdaf} - jgerstle

{btsdaf} - Jorawar Singh

{btsdaf} - jgerstle

{btsdaf} - jgerstle

Answer 4

以下是安装 font-awesome 5.2.x 版本的步骤：

1. npm install @fortawesome/fontawesome-free
2. 将 node_module/fortawesome/fontawesome-free 中的 webfonts 文件夹复制到 assets/scss/ 文件夹（或任何 assets 文件夹内的文件夹）中。
3. 在 styles.scss 中添加 $fa-font-path: "webfonts";

4. 最后，在 styles.scss 中添加以下导入语句：

   @import "~@fortawesome/fontawesome-free/scss/fontawesome";

   @import "~@fortawesome/fontawesome-free/scss/solid";

   @import "~@fortawesome/fontawesome-free/scss/brands";

还有一种更好的方法documented，但那个方法是关于如何将其作为 Angular 模块添加，而我想以最简单的方式使用字体。

- imal hasaranga perera