angular fontawesome社交图标问题[重复]答案

【问题标题】：angular fontawesome social icons issue [duplicate]angular fontawesome社交图标问题[重复]
【发布时间】：2021-10-20 14:13:17
【问题描述】：

我已经为我的 Angular 应用程序中的字体真棒图标完成了 npm install，我的 package.json 包含：

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

在我的app.module.ts 中，我已经导入了 font-awesome：

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

在我的组件中，

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

现在，当我在我的组件 html 中使用 <fa-icon [icon]="faCoffee"></fa-icon> 时，我可以成功显示咖啡杯图标。现在我需要显示社交图标，例如 facebook、instagram 和 twitter，但是当我尝试 <fa-icon [icon]="faFaceBook"></fa-icon> 等时，没有图标出现。任何人都可以为我提供正确的文本以在 [icon]= 中使用这些社交图标吗？为<fa-icon [icon]="?"></fa-icon>

【问题讨论】：

是的，问题解决了

标签： angular font-awesome angular-fontawesome

【解决方案1】：

解决方法如下：

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

在组件中：

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>

【讨论】：