Font Awesome icon library and other icon libraries are not working, only PrimeIcons

Post Reply
hedgerowUS
Posts: 3
Joined: 01 May 2019, 23:36

28 Jul 2022, 15:37

We are upgrading to California primeng template 13.1.0.
We use icons from both Font Awesome and Primeicons.
The Font Awesome icons do not display because this setting was added:

Code: Select all

i:not([class~=pi]) {
  background-color: transparent;
  color: #2196f3;
  font-family: Monaco, courier, monospace;
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  padding: 0 4px;
  letter-spacing: 0.5px;
  font-weight: 600;
  margin: 0 2px;
  display: inline-flex;
}
I am wondering what was the purpose of adding this to the layout style css files and if I can remove it.

seymagullu
Posts: 11
Joined: 17 Jun 2022, 09:43

08 Aug 2022, 14:13

Hi,

We'll check and get back to you.

Regards.

seymagullu
Posts: 11
Joined: 17 Jun 2022, 09:43

08 Aug 2022, 20:55

Hi,

The code you posted is used by the documentation. You can remove or adapt it if you don't need it.

You can use FontAwesome icons as described below. Please do the following steps.

1-) Install FontAwesome packages by npm or yarn

Code: Select all

npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/angular-fontawesome@latest
2-) Import FontAwsome module into app.module.ts

CODE: SELECT ALL

Code: Select all

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
....
....

imports:[
.....
FontAwesomeModule,
.....
]
3-) Go to app.menu.component.ts and import icons you wish to use
CODE: SELECT ALL

Code: Select all

import { faCoffee } from '@fortawesome/free-solid-svg-icons';
.....
.....
    ngOnInit() {
        this.model = [
            {
                label: 'Favorites', icon:  faCoffee,
                ....
            },

4-) Go to app.menuitem.component.ts
To use fontawesome icons, you need to use their component selector, thus remove the lines below since FontAwesome icons does not work with <i></i> tags.

Remove this code ( lines 18 & 25 )
CODE: SELECT ALL

Code: Select all

<i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
Use this instead
CODE: SELECT ALL

Code: Select all

<fa-icon [icon]="item.icon" class="layout-menuitem-icon"></fa-icon>
PS: After doing this, PrimeIcons will not appear in the menu. If you want to overcome this and use both icon libraries together you need to implement your custom logic into app.menuitem.component.ts (lines 18 & 25) and it's up to you.

Regards.

Post Reply

Return to “California - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest