Using angular-fontawesome

Post Reply
oktaendy
Posts: 5
Joined: 31 Dec 2019, 05:37

09 Jan 2020, 15:19

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

merve7
Posts: 742
Joined: 12 Sep 2017, 10:44

13 Jan 2020, 09:46

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
Image

oktaendy
Posts: 5
Joined: 31 Dec 2019, 05:37

17 Jan 2020, 04:36

thank you for your help...

schleichv
Posts: 1
Joined: 26 Dec 2020, 23:21

24 Apr 2021, 04:45

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! ;)

mert.sincan
Posts: 4741
Joined: 29 Jun 2013, 12:38

05 May 2021, 16:11

Thanks a lot for your update!

Best Regards,

Post Reply

Return to “Paradise - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest