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

Question

我在使用scss为我的Angular 4+项目添加font-awesome时遇到了问题.我试图这里给出的许多步骤:如何添加字体真棒到角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方式来做.在一个有角度的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”）。

以下是步骤：

1. 像往常一样安装 FontAwesome 包：

   npm install --save @fortawesome/fontawesome-free 
   

2. 将以下行添加到您的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 5fa被认为是fas
该装置使用的情况下，fa在HTML中你会看到固体（大胆）的图标。
因此， 如果您要从 FontAwesome 的早期版本升级，请确保您使用的是far而不是fa常规（非粗体）
字体。
（这可能需要您升级到专业版。）

Answer 3

Npm install font Awesome 并只需添加到 .angular-cli.json 文件中的样式，它就会为您捆绑。