Ngx-admin: How can i use font-awesome icons in pages-menu?

[eqplanoFront]

Issue type

I'm submitting a ... (check one with "x")

• [ ] bug report
• [ ] feature request
• [x] question about the decisions made in the repository

I need to know how to use font-awesome icons in pages-menu, the demo describe this as possible, but i don't know how to use that icons in pages-menu, i have tried so many things, like add icon: 'fas fa-iconname', or icon: {icon: 'fas fa-iconname', pack: 'fontawesome'}, i don't know what can i do for this works.

Current behavior:
When is defined property "icon:" with some icon from font-awesome, icon is not showed.

Expected behavior:
Is expected that icon be showed.

Steps to reproduce:
Change an item from pages-menu, with property icon with font-awesome related string, like 'fas fa-check'.

Related code:

          {
            title: 'Declarações',
            icon: 'fas fa-undo',
            link: '/layout/stepper',
          },

Other information:

npm, node, OS, Browser

NPM last version, Node.JS last version, windows 10, Chrome/Firefox

Angular, Nebular

Angular 8, Nebular 4.4.0

[codesiddhant]

it is very easy to register and use your own custom icon in sidebar menu by following simple steps
Step 1 (for registring the custom icon pack for your module )
go to this path "srcapppagespages.module.ts"
Step 2
Mention this code
export class PagesModule { constructor(iconsLibrary: NbIconLibraries) { iconsLibrary.registerSvgPack('myicon', { 'python': '<img src="../../assets/python.png" width="25px">', }); } }
Step 3
go to this path "srcapppagespages.menu.ts"
add your menu with icon like this
{ title: 'Dashboard', icon: { icon: 'python', pack: 'myicon'}, link: '/pages/dashboard', home: true, },

see the result here

[eqplanoFront]

it is very easy to register and use your own custom icon in sidebar menu by following simple steps
Step 1 (for registring the custom icon pack for your module )
go to this path "srcapppagespages.module.ts"
Step 2
Mention this code
export class PagesModule { constructor(iconsLibrary: NbIconLibraries) { iconsLibrary.registerSvgPack('myicon', { 'python': '<img src="../../assets/python.png" width="25px">', }); } }
Step 3
go to this path "srcapppagespages.menu.ts"
add your menu with icon like this
{ title: 'Dashboard', icon: { icon: 'python', pack: 'myicon'}, link: '/pages/dashboard', home: true, },

see the result here

I appreciate that, but, i need to use FontAwesome icons as a pack, is impractical to register all icons manually on module constructor, and you explained how to use an SVG icon, not an FontAwesome Icon.

[codesiddhant]

it is very easy to register and use your own custom icon in sidebar menu by following simple steps
Step 1 (for registring the custom icon pack for your module )
go to this path "srcapppagespages.module.ts"
Step 2
Mention this code
export class PagesModule { constructor(iconsLibrary: NbIconLibraries) { iconsLibrary.registerSvgPack('myicon', { 'python': '<img src="../../assets/python.png" width="25px">', }); } }
Step 3
go to this path "srcapppagespages.menu.ts"
add your menu with icon like this
{ title: 'Dashboard', icon: { icon: 'python', pack: 'myicon'}, link: '/pages/dashboard', home: true, },
see the result here

I appreciate that, but, i need to use FontAwesome icons as a pack, is impractical to register all icons manually on module constructor, and you explained how to use an SVG icon, not an FontAwesome Icon.

you can use this code to use font-awesome as icon pack
in-app module ("srcapppagespages.module.ts")
export class PagesModule { constructor(iconsLibrary: NbIconLibraries) { iconsLibrary.registerFontPack('fa', { packClass: 'fa', iconClassPrefix: 'fa' }); iconsLibrary.registerFontPack('far', { packClass: 'far', iconClassPrefix: 'fa' }); // ... }); } }
and in page-menu ("srcapppagespages.menu.ts")
{ title: 'Dashboard', icon: { icon: 'beer', pack: 'fa'}, link: '/pages/dashboard', home: true, },

see result here

[eqplanoFront]

I see, i have tested now and it works, but the icon is too large, i think this is something about the font size.

[eqplanoFront]

I've just changed something on _overrides.css and the size fits.

[willianferreiradev]

I've just changed something on _overrides.css and the size fits.

Could you tell me how you did it?

[eqplanoFront]

I've just changed something on _overrides.css and the size fits.

Could you tell me how you did it?

I've just changed my _overrides.scss like this:

`
@import './themes';

@mixin nb-overrides() {
nb-select.size-medium button {
padding: 0.4375rem 2.2rem 0.4375rem 1.125rem !important;

nb-icon {
  right: 0.41rem !important;
}

}

nb-layout-column {
padding: 1rem 1rem 0.5rem !important;
}
// USE THIS CODE BELOW
nb-icon {
font-size: 1rem !important;
}
}
`

[nimaansary]

@codesiddhant but your solution does not work for me