与 PrimeNg 模块一起使用时，FontAwesome 图标不显示

Question

I have installed angular-fontawesome using the instructions here: https://www.npmjs.com/package/@fortawesome/angular-fontawesome

The icons show up when used in this fashion (app.component.html):

    <div style="text-align:center">
        <!-- simple name only that assumes the 'fas' prefix -->
        <fa-icon icon="coffee"></fa-icon>
        <!-- ['fas', 'coffee'] is an array that indicates the [prefix, iconName] -->
        <fa-icon [icon]="['fas', 'coffee']"></fa-icon>
        <fa-icon [icon]="['fa', 'fa-fw', 'fa-book']"></fa-icon>
      </div>

My app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { ButtonModule } from 'primeng/button';
import { MenuModule } from 'primeng/menu';
import { TabMenuModule } from 'primeng/tabmenu';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';

import { TestcomponentComponent } from './testcomponent/testcomponent.component';

@NgModule({
  declarations: [
    AppComponent,
    TestcomponentComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    HttpClientModule,
    ButtonModule,
    MenuModule,
    TabMenuModule,
    FontAwesomeModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { 
  constructor() {
        // Add an icon to the library for convenient access in other components
        library.add(fas, far);
  }
}

However, I get no icons when integrating it with a PrimeNg Module (in this case their TabMenuModule). Not doing anything unusual, just following the instructions here: https://www.primefaces.org/primeng/#/tabmenu

app.component.ts
export class AppComponent {
  title = 'ClientApp';

  private items: MenuItem[];

        ngOnInit() {
          this.items = [
            {label: 'Overview', icon: 'fa fa-fw fa-bar-chart'},
            {label: 'Schedule', icon: 'fa fa-fw fa-calendar'},
            {label: 'Documentation', icon: 'fa-coffee'},
            {label: 'Support', icon: 'fa fa-fw fa-support'},
            {label: 'Discussion', icon: 'fa fa-fw fa-twitter'}
        ];
      }

I add these lines to top of the html:

<h3 class="first">Default</h3>
    <p-tabMenu [model]="items1" [activeItem]="items1[0]"></p-tabMenu>

    <h3>Templating</h3>
    <p-tabMenu [model]="items2" [activeItem]="activeItem">
        <ng-template pTemplate="item" let-item let-i="index">
            <div style="position: relative; text-align: center; min-width: 10em">
                <div class="ui-menuitem-icon" [ngClass]="item.icon" *ngIf="item.icon" style="font-size: 2em"></div>
                <div class="ui-menuitem-text">
                    {{item.label}}
                </div>
                <a tabindex="0" class="ui-menuitem-icon" (click)="closeItem($event, i)" style="position: absolute; right: -1em; top: -.5em; padding: 0" *ngIf="i !== 0">
                    <span class="pi pi-times"></span>
                </a>
            </div>
        </ng-template>
    </p-tabMenu>
<p-tabMenu [model]="items"></p-tabMenu>
<i class="far fa-chart-bar"></i>

angular.json:

"build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/ClientApp",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "node_modules/primeicons/primeicons.css",
              "node_modules/primeng/resources/themes/nova-light/theme.css",
              "node_modules/primeng/resources/primeng.min.css",
              "src/styles.css"
            ],

I am using: Angular CLI: 8.0.2 Node: 10.15.3 OS: win32 x64 Angular: 8.0.0 angular-fontawesome@0.4.0 free-solid-svg-icons@5.9.0 free-regular-svg-icons@5.9.0

Answer 1

Try adding these css entries into your styles.scss file, that is what it took in my case.

@import  "~primeicons/primeicons.css";
@import  "~primeng/resources/themes/saga-blue/theme.css";
@import  "~primeng/resources/primeng.min.css";
@import  "~primeflex/primeflex.css";