CODEWITHSUNDEEP
angularfont-awesome
Arupam Sengupta
Arupam Sengupta

Reputation: 89

including font-awesome in an Angular Library

We are currently building a 3rd party Angular Library. We are designing 3rd party components and are using font-awesome for designing the same.

We have installed the font-awesome npm package in the host application where we are rendering the component.

But the icons are not appearing as expected. Is there any way to include the font-awesome package in our library?

Upvotes: 0

Views: 3853

Answers (3)

Eeshwar Ankathi
Eeshwar Ankathi

Reputation: 266

If you are using ng-packagr for making angular library, you can add them inside the ng-package.json.

This is how I added bootstrap, bourbon and bourbon-neat for the library.

 "lib": {
    "entryFile": "src/public_api.ts",
    "cssUrl": "inline",
    "styleIncludePaths": [
      "src/assets/styles",
      "../../node_modules/bourbon/app/assets/stylesheets",
      "../../node_modules/bourbon-neat/app/assets/stylesheets",
      "../../node_modules/bootstrap/dist/scss/bootstrap"
    ]
  }

Upvotes: 0

stayingcool
stayingcool

Reputation: 2814

In addition to what Joe has stated you could add the integrity flag:

Use Font Awesome's Free CDN

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

Other options are:

Package Manager as npm:

npm install @fortawesome/fontawesome-free

Angular: There is an official Angular component:

As per that documentation from the official documentation, here are the steps:

Yarn:

  yarn add @fortawesome/fontawesome-svg-core \
  yarn add @fortawesome/free-solid-svg-icons \
  yarn add @fortawesome/angular-fontawesome

src/app/app.component.html

<div style="text-align:center">
  <fa-icon [icon]="faCoffee"></fa-icon>
</div>

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',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  faCoffee = faCoffee;
}

Import the component:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

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

Upvotes: 1

Joe Belladonna
Joe Belladonna

Reputation: 1339

In index.html add if you use version 4.7.0:

<link rel="stylesheet" href="assets/font-awesome-4.7.0/css/font-awesome.min.css">

For other versions add their appropriate paths.

Upvotes: 0

Related Questions