Twitter Bootstrap Question posted in

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

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.

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search