angular add font awesome code example
Example 1: font awesome angular
//install in your project directory
npm install --save @fortawesome/fontawesome-free
// in angular.json add in the 'build' section the following lines in 'styles' and 'scripts'
"styles": [
"node_modules/@fortawesome/fontawesome-free/css/all.css"
]
"scripts": [
"node_modules/@fortawesome/fontawesome-free/js/all.js"
]
//from now on, you can use fontawesome icons through the
Example 2: ng add font awesome
ng add @fortawesome/angular-fontawesome
Example 3: angular font awesome
ng add @fortawesome/angular-fontawesome@
// 0.1.x angular 5.x not supported
// 0.2.x angular 6.x not supported
// 0.3.x angular 6.x && 7.x not supported
// 0.4.x, 0.5.x angular 8.x not supported
// 0.6.x angular 9.x supported
// 0.7.x angular 10.x supported
// Usage
// Typescript
import { Component } from '@angular/core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'font awesome usage';
faCoffee = faCoffee;
}
// In html
Example 4: how to use fa-icon in angular
import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core'; import { AppComponent } from './app.component';import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; @NgModule({ imports: [ BrowserModule, FontAwesomeModule ], declarations: [AppComponent], bootstrap: [AppComponent]})export class AppModule { }