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

Issue type

I’m submitting a … (check one with “x”)

• bug report
• feature request
• 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 “src\app\pages\pages.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 “src\app\pages\pages.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 (“src\app\pages\pages.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 (“src\app\pages\pages.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.