angular fontawesome social icons issue

Question

I have done the npm install for font-awesome icons in my angular application, and my package.json contains:

"@fortawesome/angular-fontawesome": "^0.5.0",
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-solid-svg-icons": "^5.15.4"

And in my app.module.ts, I have imported font-awesome:

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
imports: [
    BrowserModule,
    FontAwesomeModule,
    HttpClientModule
  ]

And in my component,

import { faCoffee } from '@fortawesome/free-solid-svg-icons';

Now when I use, <fa-icon [icon]="faCoffee"></fa-icon>, in my component html, I could able to successfully display the coffee cup icon. Now I need to display social icons like facebook, instagram and twitter, but when I trying to <fa-icon [icon]="faFaceBook"></fa-icon>, etc no icons are coming. Can any one provide me correct text to use these social icons in [icon]= ? for <fa-icon [icon]="?"></fa-icon>

score 1 · Answer 1 · answered Oct 20 '21 at 06:10

Below is the solution:

npm add  @fortawesome/free-brands-svg-icons

in component:

import { faTwitter,  faFacebookF, faInstagramSquare } from '@fortawesome/free-brands-svg-icons';

  faFacebook = faFacebookF;
  faInstagram = faInstagramSquare;
  faTwitter = faTwitter;


                 <li>
                    <fa-icon [icon]="faFacebook"></fa-icon>
                </li>
                <li>
                    <fa-icon [icon]="faInstagram"></fa-icon>
                </li>
                <li>
                    <fa-icon [icon]="faTwitter"></fa-icon>
                </li>

angular fontawesome social icons issue

1 Answers1