CODEWITHSUNDEEP
angularfont-awesomeprimengangular7font-awesome-5
Ragavan Rajan
Ragavan Rajan

Reputation: 4397

angular-fontawesome 5 icons with primeng 7 or Angular 2+

I have followed the instructions to use svg icons of angular-fontawesome 5 icons. Please find the link below

https://www.npmjs.com/package/@fortawesome/angular-fontawesome

As a first step 

npm i --save @fortawesome/fontawesome-svg-core 
npm i  --save @fortawesome/angular-fontawesome

If I am correct to use the brand icons

npm i --save @fortawesome/free-brands-svg-icons

Step two: In app.module.ts file: Imported the following 

import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
import {fab, faFacebookSquare, faGoogle} from '@fortawesome/free-brands-svg-icons';

Step three: As per the primeng documentation I want to use the brand icons inside the button. 

<div class="center-text">
 <p-button icon="fab fa-google" label="Click"></p-button> 
</div>

No errors in the console. But couldnt see the icon in display.

As an alternative way: 

  <div class="center-text">
  <i class="fab fa-google"></i>
   <p-button label="Click"></p-button>
  </div>

Still no output. Kindly help how to bring the brand icons inside the primeng buttons.

Upvotes: 8

Views: 7710

Answers (2)

Ragavan Rajan
Ragavan Rajan

Reputation: 4397

Maybe this will help someone for sure. The following steps will help you to load only the icons that you want.

Assuming you want to use only brand icons

Step 1:

npm i --save @fortawesome/free-brands-svg-icons
npm i --save @fortawesome/fontawesome-svg-core 
npm i  --save @fortawesome/angular-fontawesome

Step 2:

In app.module.ts under imports

enter image description here

Also, add the following code at the top of the module. Overall it will look like below

import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
import { fab } from '@fortawesome/free-brands-svg-icons';
library.add(fab);

Step 3: In app.module.ts constructor:

constructor(private library: FaIconLibrary) {
    library.addIcons(
        faStackOverflow,
        faGithub,
        faMedium,
        faLinkedinIn,
    );
}

Step 4: In app.module, under imports

import {
    FaIconLibrary,
    FontAwesomeModule,
} from '@fortawesome/angular-fontawesome';
import {
    faStackOverflow,
    faGithub,
    faMedium,
    faLinkedinIn
} from '@fortawesome/free-brands-svg-icons';

Step 5: To test in app.component.html. using github as an example

<a href="https://www.snatchexcel.com/" target="_blank">
  <fa-icon [icon]="['fab', 'github' [spin]="true" ]"></fa-icon> 
</a>

Run it using ng s to see your changes.

Upvotes: 1

Peter Wretmo
Peter Wretmo

Reputation: 4052

To use Font Awesome together with PrimeNG you need to use the standard fontawesome package, not angular-fontawesome.

npm install --save-dev @fortawesome/fontawesome-free

And in your angular.json file:

"styles": [
    "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
    ...
],

See https://forum.primefaces.org/viewtopic.php?t=56786 for more information.

Upvotes: 4

Related Questions