Angular 6: Font Awesome

(Last Updated On: 11. oktober 2018)

Font Awesome er en samling af ikoner baseret på en font. Den indeholder pt. knap 4000 ikoner hvoraf ca 1300 er gratis.

Jeg bruger ikonerne i et Angular 6 projekt og lagde ud med at benytte dem via angular-font-awesome …. lige indtil jeg skulle bruge thumbtack ikonet, som ikke blev vist. Men det er hvad der sker med små npm-pakker der vedligeholdes af enkeltpersoner. Super ærgerligt, for det er faktisk en godt tænkt pakke, der er meget simpel at benytte.

Men den er nu skrottet til fordel for @fortawesome/angular-fontawesome som er installeret på følgende vis:

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

$ npm install --save @fortawesome/angular-fontawesome

$ npm install --save @fortawesome/fontawesome-svg-core

$ npm install --save @fortawesome/free-solid-svg-icons

$ npm install --save @fortawesome/free-regular-svg-icons

I app.module.ts:

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faThumbtack,[,...] } from '@fortawesome/free-solid-svg-icons';

library.add(faThumbtack,[,...]);

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    BrowserModule,
    FontAwesomeModule
    ...
  ], 
  providers: [...]
});

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

import { library } from '@fortawesome/fontawesome-svg-core';

import { faThumbtack,[,...] } from '@fortawesome/free-solid-svg-icons';

library.add(faThumbtack,[,...]);

@NgModule({

declarations: [

AppComponent,

...

imports: [

BrowserModule,

FontAwesomeModule

...

providers: [...]

});

Bemærk at alle ikoner du vil benytte, skal importeres og føjes til library som vist i eksemplet herover.

Herefter kan du i et hvilket som helst component, bruge de importerede ikoner:

<fa-icon [icon]="['fas', 'thumbtack']"></fa-icon>

1	<fa-icon [icon]="['fas', 'thumbtack']"></fa-icon>

fas = free awesome solid

far = free awesome regular

fab = free awesome brand

Bemærk at fab ikoner ikke er inkluderet i mit eksempel … hvis du skal bruge disse, skal du blot tilføje @fortawesome/free-brands-svg-icons pakken.