FontAwesome 5在Angular 2+项目中的导入位置咨询

Hey there! Let me break down exactly how to get FontAwesome 5 up and running in your Angular 2+ app—since you’ve already found the base npm package, let’s fill in the rest of the setup steps, including answering your question about importing in app.module.ts.

Quick note: The @fortawesome/fontawesome package alone isn’t enough for Angular integration. You’ll need a few complementary packages to make icons work smoothly. Run this in your project root:

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

(If you’re using Pro icons, swap the free icon packages with their pro equivalents.)

This is actually the recommended way to set up FontAwesome for global use across your app. Here’s how to do it:

1. Import the FontAwesomeModule into your app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; // Import the module
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    FontAwesomeModule // Add it to your imports array
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. (Optional) Register icons globally
   If you have icons you’ll use everywhere, you can add them to FontAwesome’s library in app.module.ts so you don’t have to import them in every component:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { faUser, faHome, faBell } from '@fortawesome/free-solid-svg-icons'; // Pick your icons
import { library } from '@fortawesome/fontawesome-svg-core'; // Import the library

// Add icons to the global library
library.add(faUser, faHome, faBell);

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FontAwesomeModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once set up, you can use icons in templates easily:

• If you registered icons globally:

<fa-icon [icon]="['fas', 'user']"></fa-icon>
<fa-icon [icon]="['fas', 'home']" size="lg" style="color: #2196F3;"></fa-icon>

• If you prefer to import icons only in specific components (no global registration):
  In your component’s .ts file:

  import { Component } from '@angular/core';
  import { faShoppingCart } from '@fortawesome/free-solid-svg-icons';
  
  @Component({
    selector: 'app-cart',
    templateUrl: './cart.component.html'
  })
  export class CartComponent {
    faShoppingCart = faShoppingCart; // Assign icon to a component property
  }
  

  Then in the template:

  <fa-icon [icon]="faShoppingCart"></fa-icon>
  

• For regular-style icons, install @fortawesome/free-regular-svg-icons and import icons from there (e.g., faUser from @fortawesome/free-regular-svg-icons).
• For brand icons (like GitHub, Twitter), install @fortawesome/free-brands-svg-icons and use the fab prefix in templates: <fa-icon [icon]="['fab', 'github']"></fa-icon>

内容的提问来源于stack exchange，提问作者bartekgorski