Awesome font with Angular 2

Question

I started the NG2 application and want to add a font amazingly. I npm installed it with: npm install --save font-awesome angular2 -font-awesome. I added a project to systemjs.config.js:

map: { // our app is within the app folder app: 'app', // angular bundles '@angular/core': 'npm:@angular/core/bundles/core.umd.js', '@angular/common': 'npm:@angular/common/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http/bundles/http.umd.js', '@angular/router': 'npm:@angular/router/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', // other libraries 'rxjs': 'npm:rxjs', 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js', 'angular2-fontawesome': 'node_modules/angular2-fontawesome' }, // packages tells the System loader how to load when no filename and/or no extension packages: { app: { defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' }, 'angular2-fontawesome': { defaultExtension: 'js' } } 

and I added in app.module.ts:

 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { CorporateComponent } from './corporate/corporate.component'; import { Angular2FontawesomeModule } from 'angular2-fontawesome/angular2-fontawesome' @NgModule({ imports: [ BrowserModule , Angular2FontawesomeModule], declarations: [ AppComponent, CorporateComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } 

Now I am trying to use it in my component: I am adding html to the template:

 <i class="fa fa-industry" aria-hidden="true"></i> 

But for some reason I don’t see it ... I followed the npm guide: https://www.npmjs.com/package/angular2-fontawesome

Is there anything else I could forget?

Thanks for any answer!

Answer 1

if you want to use the FontAwesome css style in your application, just put the css link in your index.html, you don't need angular2-font-awesome

index.html

 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 

if you use angular2-font-awesome

 <i fa [name]="industry"></i> <fa [name]="industry"></fa> 

I think it's better to use cdn.

Answer 2

It doesn't take much effort, just add a script tag.

 <div> <h2>Hello {{name}}</h2> <i class="fa fa-home"></i> </div> 

and my index.html contains the script link to the above script URL.

Get the script code Register here . You will receive an email from font-awesome as shown below

Live demo

Answer 3

I think you need to add it to your .angular-cli.json section for example:

you may have this under a different name in node_modules. try going down the list in node_modules and see what name it was installed under. Another thing I noticed is npm install --save font-awesome angular-font-awesome

 `"styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css", "../node_modules/font-awesome/css/font-awesome.css", "../node_modules/npm-font-open-sans/open-sans.styl" ],