Icons FontAwesome (Angular)

Installation

01.05.2020

npm install --save @fortawesome/fontawesome-free

"styles": [
  ...
  "node_modules/@font-awesome/fontawesome-free/css/all.min.css",
  ...
],

Links

https://dev.to/angular/angular-fontawesome-in-five-easy-steps-3oe9

14.02.2019

npm install font-awesome --save

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

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

Links

https://www.npmjs.com/package/@fortawesome/free-solid-svg-icons

Verwendung

Allgemein

Im Modul

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

@NgModule({
  ...,
  imports: [
    ...,
    FontAwesomeModule
  ],
  ...
})
export class AppModule {
  constructor() {
    /* Add an icon to the library for convenient access in other components */
    library.add(faCoffee);
  }
}

In der Komponente

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

Links

https://github.com/FortAwesome/angular-fontawesome#usage

https://fontawesome.com/free

Select-Option

Da <option> nur Text enthalten darf, ist eine Einbindung von Icons über CSS-Klassen nicht möglich. Jedoch basieren FontAwesome-Icons auf Unicode und können daher über diese eingebunden werden. Wichtig ist, dass im select-Tag FontAwesome, gefolgt von einer anderen als Font-Family angegeben wird: style="font-family:'FontAwesome', Arial;"

<select formControlName="rating" style="font-family:'FontAwesome', Arial;">
  <option value="0"></option>
  <option value="1">&#xf005;</option>
  <option value="2">&#xf005;&#xf005;</option>
  <option value="3">&#xf005;&#xf005;&#xf005;</option>
  <option value="4">&#xf005;&#xf005;&#xf005;&#xf005;</option>
  <option value="5">&#xf005;&#xf005;&#xf005;&#xf005;&#xf005;</option>
</select>

Table-Column

<td style="font-family: FontAwesome;">
  \u{f005}
</td>

Links

https://github.com/FortAwesome/Font-Awesome/issues/996

Zurück zu Angular