How to import font-awesome in STACKBLITZ JS project?

Question

I'm working on a pure javascript project ( without any framework ) in STACKBLITZ. It has an option to install dependencies. But how to import it to my index.js file so that i can use in my HTML file.

I have referred the DOCUMENTATION of font awesome. But im having trouble in finding the path of those files for importing.

Answer 1

You need to add the following dependencies to your package.json:

"@fortawesome/angular-fontawesome": "^0.5.0",
"@fortawesome/fontawesome-svg-core": "^1.2.21",
"@fortawesome/free-solid-svg-icons": "^5.12.1"

Import FontAwesomeModule in your app.module.ts:

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

and add it to the imports array:

@NgModule({
  imports:      [ BrowserModule, FormsModule, FontAwesomeModule ],
  declarations: [ AppComponent],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

To use for example the faThumbsUp, faThumbsDown icons in the template of a component, you have to import them in the component's .ts file.

import { faThumbsUp, faThumbsDown } from '@fortawesome/free-solid-svg-icons';

Add properties to the component and assign them these icons:

export class VoterComponent  {
  @Input() name: string;

  faThumbsUp = faThumbsUp
  faThumbsDown =  faThumbsDown

}

Use the properties (i.e icons) in the component's template or in its .html file like so:

<div class="col-sm-2">
<button class="btn btn-primary">  
  <fa-icon [icon]="faThumbsUp"></fa-icon>
</button> 

Here is a working stackblitz. I hope this will help others.