怎樣在angular7/ionic 4 中使用font awesome圖標

安裝 npm istall font awesome for angular

僅例舉一些免費的圖標

npm istall @fortawesome/fontawesome-svg-core
npm istall @fortawesome/free-solid-svg-icons
npm istall @fortawesome/angular-fontawesome
複製代碼

用法一

src/app/app.component.html

<div style="text-align:center">
  <fa-icon [icon]="faCoffee"></fa-icon>
</div>
複製代碼

src/app/app.component.ts

import { Component } from '@angular/core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  faCoffee = faCoffee;
}
複製代碼

src/app/app.module.ts

• 1, Import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'
• 2, Add FontAwesomeModule to imports

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

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

用法二

src/app/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>
</div>
複製代碼

src/app/app.module.ts

• Import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'

• Add FontAwesomeModule to imports

• Import { library } from '@fortawesome/fontawesome-svg-core'

• Import an icon like { faCoffee } from '@fortawesome/free-solid-svg-icons'

• Add to the library with library.add(faCoffee)

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FontAwesomeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor() {
    // Add an icon to the library for convenient access in other components
    library.add(faCoffee);
  }
}
複製代碼

若是在其餘module須要用到font awesome圖標也須要在頁面的module中導入FontAwesomeModule

imports: [
    CommonModule,
    FormsModule, 
    RouterModule.forChild(routes),
    FontAwesomeModule
  ],
  declarations: [DashboardPage]
})
export class DashboardPageModule {}

複製代碼