Page 1 of 1
Using angular-fontawesome
Posted: 09 Jan 2020, 15:19
by oktaendy
i want to user angular-fontawesome in menu, can you make a sample how to modify it so i can modify this
{label: 'Company', icon: 'fa fa-fw fa-building', routerLink: ['/company']},
to user angular-fontawesome
thanks for your help
Re: Using angular-fontawesome
Posted: 13 Jan 2020, 09:46
by merve7
Hi,
You can use angular font-awesome with the below steps;
1) Please, firstly add the icon as like this guideline;
https://github.com/FortAwesome/angular-fontawesome
2)Replace the menu icon with the new icon in the model property(in app.menu.component.ts);
Code: Select all
this.model = [
{label: 'Dashboard', icon: faCoffee, routerLink: ['/']},
{
label: 'Menu Modes', icon: faCoffee,
items: [
{label: 'Static Menu', icon: faCoffee},
{label: 'Overlay Menu', icon: faCoffee},
{label: 'Slim Menu', icon: faCoffee},
{label: 'Light Menu', icon: faCoffee},
{label: 'Dark Menu', icon: faCoffee}
]
}
]
3) Replace <i> tag with <fa-icon> (line 198 and line 208 in app.menu.component.ts);
Code: Select all
<i [ngClass]="child.icon"></i> //remove this
<fa-icon [icon]="child.icon"></fa-icon> //add this
Re: Using angular-fontawesome
Posted: 17 Jan 2020, 04:36
by oktaendy
thank you for your help...
Re: Using angular-fontawesome
Posted: 24 Apr 2021, 04:45
by schleichv
Just a note. When using the newest version of the Harmony theme the icon definition was in the
app.menuitem.component.ts file.
Replaced:
Code: Select all
<i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
with
Code: Select all
<fa-icon [icon]="item.icon" class="p-mr-2"></fa-icon>
Remember to replace it in both spots in the template!
Re: Using angular-fontawesome
Posted: 05 May 2021, 16:11
by mert.sincan
Thanks a lot for your update!
Best Regards,