如何将真棒字体添加到Angular 2 + CLI项目

如果由于某种原因您无法安装软件包，请抛出npm。您始终可以编辑index.html并在标题中添加超赞的CSS字体。然后在项目中使用它。

对于webpack2使用：

{
 test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?(v=)?(\d+)(\.\d+)*)?$/,
                    loader: "file-loader"
}

代替 file-loader?name=/assets/fonts/[name].[ext]

现在，有几种方法可以在Angular CLI上安装fontAwesome：

ng add @fortawesome/angular-fontawesome

OR using yarn

yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/angular-fontawesome

OR Using NPM

npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/angular-fontawesome

参考在这里：https : //github.com/FortAwesome/angular-fontawesome

对于Angular 9使用ng：

ng add @fortawesome/angular-fontawesome@0.6.x

在这里查看更多信息

我想使用Font Awesome 5+，大多数答案都集中在旧版本上

对于新的Font Awesome 5+，尚未发布角度项目，因此，如果您要使用Font Awesome网站atm上提到的示例，则需要使用变通方法。（尤其是fas，far类而不是fa类）

我刚刚在我的styles.css中将cdn导入到Font Awesome 5。只是添加了此内容，以防有人比我更快找到答案:-)

Style.css中的代码

@import "https://use.fontawesome.com/releases/v5.0.7/css/all.css";

将其作为“ devDependencies”字体添加到您的package.json中：awesome：“版本号”

转到您配置的命令提示符键入npm命令。

要在Angular项目中使用Font Awesome 5，请将下面的代码插入src / index.html文件中。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">

祝好运！

我浪费了数小时试图将最新版本的FontAwesome 5.2.0与AngularCLI 6.0.3和Material Design一起使用。我按照FontAwesome网站上的npm安装说明进行操作

他们的最新文档指示您使用以下内容进行安装：

npm install @fortawesome/fontawesome-free

浪费了几个小时后，我终于卸载了它，并使用以下命令安装了真棒字体（这将安装FontAwesome v4.7.0）：

npm install font-awesome --save

现在使用以下命令可以正常工作：

$fa-font-path: "~font-awesome/fonts" !default;
@import "~font-awesome/scss/font-awesome.scss";
<mat-icon fontSet="fontawesome" fontIcon="fa-android"></mat-icon>

接受的答案已过时。

对于有角9和Fontawesome 5

1. 安装FontAwesome

   npm install @ fortawesome / fontawesome-free-保存

2. 在样式下的angular.json上注册

   “ node_modules/@fortawesome/fontawesome-free/css/all.min.css”

3. 在您的应用程序上使用它

上面有很多说明，我建议您看一下。但是，需要注意的是：

安装后，在我的项目（仅一个星期的新练习项目）中，Using <i class="fas fa-coffee"></i> 无效，并且过去的一周内，此处的示例图标也从Font Awesome复制到了剪贴板。

这<i class="fa fa-coffee"></i> 确实有效。如果在您的项目上安装了Font Awesome之后仍无法正常工作，建议您检查图标上的类以删除“ s”以查看其是否正常工作。

我想我会为此解决，因为font-awesome现在根据其文档安装的方式有所不同。

npm install --save-dev @fortawesome/fontawesome-free

为什么它令人赞叹不已，现在让我escape然，但我认为我会坚持使用最新版本，而不是退回到旧字体真棒。

然后我将其导入到我的scss

$fa-font-path: "../node_modules/@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/brands";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/v4-shims";

希望这可以帮助

这篇文章介绍了如何将Fontawesome 5集成到Angular 6中（Angular 5和以前的版本也可以使用，但是您必须调整我的著作）

选项1：添加css文件

优点：每个图标都会包括在内

相反：将包括每个图标（应用程序尺寸较大，因为包括了所有字体）

添加以下包：

npm install @fortawesome/fontawesome-free-webfonts

然后将以下几行添加到您的angular.json中：

"app": {
....
"styles": [
....
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fontawesome.css",
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-regular.css",
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-brands.css",
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-solid.css"
],
...    
}

选项2：角度包装

优点：较小的应用程序大小

相反：您必须包括要单独使用的每个图标

使用FontAwesome 5 Angular软件包：

npm install @fortawesome/angular-fontawesome

只需按照他们的文档添加图标即可。他们使用svg-icons，因此您只需要添加真正使用的svgs /图标即可。

对于Angular 6，

第一 npm install font-awesome --save

添加 node_modules/font-awesome/css/font-awesome.css到angular.json。

请记住不要在前面添加任何点node_modules/。

如果您使用的是SASS，则可以通过npm进行安装

npm install font-awesome --save

并使用以下命令将其导入您/src/styles.scss的：

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

提示：尽可能避免angular-cli破坏基础架构。;）

在Angular 2.0最终发行版之后，Angular2 CLI项目的结构已更改 -您不需要任何供应商文件，不需要system.js-仅Webpack。所以你也是：

1. npm install font-awesome --save

2. 在angular-cli.json文件中找到styles[]数组，然后在此处添加“真棒字体”引用目录，如下所示：

   "apps": [
       {
         "root": "src",
         "outDir": "dist",
         ....
         "styles": [
             "styles.css",
             "../node_modules/bootstrap/dist/css/bootstrap.css",
             "../node_modules/font-awesome/css/font-awesome.css" // -here webpack will automatically build a link css element out of this!?
         ],
         ...
     }
     ]
   ],
   

   在Angular的最新版本中，请改用该angular.json文件，而不使用../。例如，使用"node_modules/font-awesome/css/font-awesome.css"。

3. Place some font-awesome icons in any html file you want:

   <i class="fa fa-american-sign-language-interpreting fa-5x" aria-hidden="true"> </i>

4. Stop the application Ctrl + c then re-run the app using ng serve because the watchers are only for the src folder and angular-cli.json is not observed for changes.

5. Enjoy your awesome icons!