CODEWITHSUNDEEP
angularfont-awesomenebularngx-admin
TheGuyNextDoor
TheGuyNextDoor

Reputation: 7937

Angular Nebular theme using FontAwesome icon pack

The stack: Angular 9.1.7, Nebular 5.0.0, FontAwesome 5.13

I want to change the default icon set (EvaIcons) used by Nebular to FontAwesome using this guideline:

https://akveo.github.io/nebular/docs/guides/register-icon-pack#register-icon-pack

Unfortunately the icons are not getting displayed. I'm close because the Nebular EvaIcons are no longer displayed. From the DeveloperTools, i can see nb-icon using fa-user, but nothing is displayed.

Upvotes: 2

Views: 4444

Answers (2)

Albin Pettersson
Albin Pettersson

Reputation: 231

You didn't provide what you have installed or configured.

But here comes my answer anyways... I have managed load FontAwesome into my Nebular app. That said, not replacing EvaIcons but adding them additionally to Eva.

  1. install FontAwesome.
  2. Include it in your angular.json
  3. Register the icon package in app.component
  4. Use the FontAwesome within Nebulars nb-icon component

In Code:

1. npm install --save @fortawesome/fontawesome-free

2. in angular.json "styles": [..., "node_modules/@fontawesome/fontawesome-free/css/all.css", ...],
   "scripts": [..., "node_modules/@fontawesome/fontawesome-free/js/all.js", ...]

3. import { NbIconLibraries } from '@nebular/theme';
   @Component({
     selector: 'ngx-app',
     template: '<router-outlet></router-outlet>',
   })
   export class AppComponent implements OnInit {
     constructor(private iconLibraries: NbIconLibraries) {
       this.iconLibraries.registerFontPack('fas', { packClass: 'fas', iconClassPrefix: 'fa' });
       this.iconLibraries.registerFontPack('far', { packClass: 'far', iconClassPrefix: 'fa' });
       this.iconLibraries.registerFontPack('fab', { packClass: 'fab', iconClassPrefix: 'fa' });
       this.iconLibraries.setDefaultPack('far');
   ...

4. <nb-icon icon="arrow-right" pack="fas"></nb-icon>

(Maybe there is a better way of doing this, maybe loading the js isn't required idk...)

This way you may use either Eva or FontAwesome Icons, or from whatever registered pack.

Eva:         <nb-icon icon="SOME_ICON">                           </nb-icon>
FontAwesome: <nb-icon icon="SOME_ICON" pack="fas/far/fab/fal/fad"></nb-icon>

Upvotes: 11

Udhayakumar
Udhayakumar

Reputation: 437

Use the below method,

  1. Install font-awesome
npm install --save @fortawesome/fontawesome-free
  1. Add styles in angular.json file
"styles": [
     "node_modules/@fortawesome/fontawesome-free/css/all.css",
 ],
  1. import in modules
import { NbIconModule } from '@nebular/theme';

imports: [
    NbIconModule,
],
  1. In component.ts
 constructor(private iconLibraries: NbIconLibraries) {
    this.iconLibraries.registerFontPack('font-awesome', { packClass: 'fab', iconClassPrefix: 'fa' });
  }
  1. In Component.html
<nb-icon icon="instagram" pack="font-awesome"></nb-icon>

I hope it will work

Upvotes: 2

Related Questions