Angular CLI 中未显示字体很棒的图标：8.2.2 而是显示正方形

Question

我已经通过 https://www.npmjs.com/package/angular-font-awesome 安装了npm install --save font-awesome angular-font-awesomeFont Awesome。

将其链接到 angular.json 中

"styles": [
     "src/styles.css",
     "node_modules/font-awesome/css/font-awesome.min.css"
]

在index.html中我已经链接了该库

<link rel="stylesheet" type="text/css" href="../node_modules/font-awesome/css/font-awesome.min.css">

我的图标 html 代码如下所示：

<i class="fa fa-facebook-f"></i>

并且仍然显示方块而不是图标。

有人可以帮忙吗？

Answer 1

要安装 \xc2\xabfont-awesome\xc2\xbb 使用：

\n

$ npm install @fortawesome/angular-fontawesome@<version>\n$ npm install @fortawesome/fontawesome-svg-core\n$ npm install @fortawesome/free-solid-svg-icons\n

\n

然后我们需要将其导入app.module.ts：

\n

imports: [\n    BrowserModule,\n    FontAwesomeModule\n],\n

\n

src/app/app.component.html：

\n

<div style="text-align:center">\n  <fa-icon [icon]="faCoffee"></fa-icon>\n</div>\n

\n

src/app/app.component.ts

\n

import { Component } from \'@angular/core\';\nimport { faCoffee } from \'@fortawesome/free-solid-svg-icons\';\n\n@Component({\n  selector: \'app-root\',\n  templateUrl: \'./app.component.html\',\n  styleUrls: [\'./app.component.css\']\n})\nexport class AppComponent {\n  title = \'app\';\n  faCoffee = faCoffee;\n}\n

\n

更新：

\n

可以通过添加faFacebook图标来使用 Facebook fontawesome。让我举个例子。

\n

要安装包free-regular-svg-icons：

\n

npm i --save @fortawesome/free-regular-svg-icons\n

\n

要安装包free-regular-svg-icons：

\n

npm i --save @fortawesome/free-brands-svg-icon\n

\n

应用程序模块.ts：

\n

import { NgModule } from \'@angular/core\';\nimport { BrowserModule } from \'@angular/platform-browser\';\nimport { FormsModule } from \'@angular/forms\';\n\nimport { FontAwesomeModule, FaIconLibrary } from \'@fortawesome/angular-fontawesome\';\nimport { faSquare, faCheckSquare } from \'@fortawesome/free-solid-svg-icons\';\nimport { faSquare as farSquare, faCheckSquare as farCheckSquare } from \'@fortawesome/free-regular-svg-icons\';\nimport { faStackOverflow, faGithub, faMedium, faFacebook } from \'@fortawesome/free-brands-svg-icons\';\n\nimport { AppComponent } from \'./app.component\';\nimport { HelloComponent } from \'./hello.component\';\n\n@NgModule({\n  imports:      [ BrowserModule, FormsModule, FontAwesomeModule ],\n  declarations: [ AppComponent, HelloComponent ],\n  bootstrap:    [ AppComponent ]\n})\nexport class AppModule {\n  constructor(private library: FaIconLibrary) {\n    library.addIcons(faSquare, faCheckSquare, farSquare\n        , farCheckSquare, faStackOverflow, faGithub, faMedium, faFacebook);\n  }\n}\n

\n

应用程序组件.html：

\n

<div style="text-align:center">\n  <h2>Using Brand Icons</h2>\n  <fa-icon [icon]="[\'fab\', \'stack-overflow\']"></fa-icon>\n  <br>\n  <fa-icon [icon]="[\'fab\', \'github\']"></fa-icon>\n  <br>\n  <fa-icon [icon]="[\'fab\', \'medium\']"></fa-icon>\n  <br>\n  <fa-icon [icon]="[\'fab\', \'facebook\']"></fa-icon>  \n  <br>\n</div>\n

\n

可以在 stackblitz.com 上看到。

\n