TechQA.

How to add Fontawesome to an Angular app and get the icons to appear

4.8k views Asked by At

I added

"@fortawesome/fontawesome-free": "5.15.1"

to dependencies in my package.json and then I added to my html

<span class="fas fa-sign-in-alt"></span>

but nothing shows up.

What do I need to do? It's completely unclear.

I'm in a project created by VisualStudio and it has Twitter Bootstrap in the package.json and that appears to be working without bootstrap being mentioned anywhere else, so why doesn't it work for FontAwesome?

This doesn't work.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [
    '../../node_modules/@fortawesome/fontawesome-free/css/all.min.css'
  ]
})
export class AppComponent {
  title = 'app';
}

Adding to styles.css:

@import "../node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css";

also doesn't work. This is crap.

What was so bad about adding a <link> in the <head>? This is awful.

angular font-awesome-5
Original Q&A
2

There are 2 answers

3
Mikkel Christensen On

Adding third-party global styles to angular.json

In your angular.json file you'll have a property that is meant to describe files or globs to include in your webpack build.

{
  "projects": {
    "architect": {
      "build": {
        "styles": [] // add the path here.
      }
    }
  }
}

So, for your case of font-awesome, it would look something like the following:

"styles": [
   "src/styles.scss",
  "node_modules/@fortawesome/fontawesome-free/css/all.css"
]

To get that file, download the corresponding fortawesome-package as described on their website :

npm install --save @fortawesome/fontawesome-free

Once you've modified your angular.json you will have to restart your angular cli for the changes to take effect.

Why can you not add it directly to index.html's head section.

The reason for this is that the index.html you will distribute is being generated by webpack once you run ng build so you have to take this extra step in telling the webpack toolchain to include your style in the generated index.html's head.

More information

For more information on Angular workspace configuraiton you can check the reference guide here: https://angular.io/guide/workspace-config

3
Owen Kelvin On

For use with Angular 9+

You can also consider using the angular-fontawesome library

Steps

  1. Install the dependancies

Using npm

$ npm install @fortawesome/fontawesome-svg-core
$ npm install @fortawesome/free-solid-svg-icons
  1. Add FontAwesomeModule to imports in src/app/app.module.ts:
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 { }
  1. Tie the icon to the property in your component src/app/app.component.ts:
import { Component } from '@angular/core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  faCoffee = faCoffee;
}
  1. Use the icon in the template src/app/app.component.html:
<fa-icon [icon]="faCoffee"></fa-icon>

Related Questions in ANGULAR

Related Questions in FONT-AWESOME-5

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions