Font Awesome 5 and Angular 5
I'm using this in angular 8 version. It's working perfectly. Please follow this simple procedure:
First install it by angular cli
npm install --save @fortawesome/fontawesome-free
Open angular.json and update the css file as follow
"styles": [ "styles.css", "node_modules/@fortawesome/fontawesome-free/css/all.css"]
Restart your server
eg, how to add
<i class="fas fa-paper-plane"></i>
Happy coding :)
For more font awesome icons
Yes, you could import and add them all
import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
export class AppModule {
constructor(library: FaIconLibrary) {
library.addIconPacks(fas, far);
}
}
However
You can also import entire icon styles. But be careful! This way of importing icons does not support tree-shaking, so all icons from the imported package will end up in the bundle.
Also, since you are using angular-fontawesome
, use it:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, FontAwesomeModule],
bootstrap: [AppComponent]
})
export class AppModule {
constructor(library: FaIconLibrary) {
// Add an icon to the library for convenient access in other components
library.addIcons(faCoffee);
}
}
and in html
<!-- simple name only that assumes the default prefix -->
<fa-icon icon="coffee"></fa-icon>
<!-- ['fas', 'coffee'] is an array that indicates the [prefix, iconName] -->
<fa-icon [icon]="['fas', 'coffee']"></fa-icon>
All code taken from the official documentation
Install
npm install --save @fortawesome/fontawesome-free
and use in .angular-cli
"styles": [
"styles.css",
"../node_modules/@fortawesome/fontawesome-free/css/all.css",
reference : Using a Package Manager