带有primeng 7或Angular 2+的angular-fontawesome 5图标答案

【问题标题】：angular-fontawesome 5 icons with primeng 7 or Angular 2+带有primeng 7或Angular 2+的angular-fontawesome 5图标
【发布时间】：2019-01-22 21:34:32
【问题描述】：

我已按照说明使用 angular-fontawesome 5 图标的 svg 图标。请在下面找到链接

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

作为第一步

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

如果我正确使用品牌图标

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

第二步：在app.module.ts文件中：导入如下

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

第三步：根据primeng文档，我想在按钮内使用品牌图标。

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

控制台中没有错误。但看不到显示中的图标。

作为替代方式：

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

仍然没有输出。请帮助如何将品牌图标带入primeng按钮内。

【问题讨论】：

不确定您指的是什么。在您链接的文档中的任何地方，他们都在通过其组件 fa-icon 创建图标，因此正如您在上面看到的那样，它将是 <fa-icon [icon]="faGoogle" ></fa-icon>
你可以找到一个更完整的例子如何做到这一点here。
@peinearydevelopment 谢谢我现在使用了标签。我可以看到屏幕上出现了图标，但你如何在按钮内按下。
我不相信你可以。正如您在开发工具中看到的那样，fa-icon html 元素被替换为 svg。我认为您必须在图标周围放置按钮。
@peinearydevelopment 很抱歉很困惑。在开发工具中，我可以看到 svg 元素。但是按钮标签在 SVG 之外。

标签： angular font-awesome primeng angular7 font-awesome-5

【解决方案1】：

要将 Font Awesome 与 PrimeNG 一起使用，您需要使用标准的 fontawesome 包，而不是 angular-fontawesome。

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

在你的 angular.json 文件中：

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

请参阅 https://forum.primefaces.org/viewtopic.php?t=56786 了解更多信息。

【讨论】：

谢谢。您提到的方式是加载所有图标。这将增加捆绑包的大小。我也在寻找品牌图标，而不是所有图标

【解决方案2】：

也许这肯定会对某人有所帮助。以下步骤将帮助您仅加载所需的图标。

假设您只想使用品牌图标

第 1 步：

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

第 2 步：

在 import 下的 app.module.ts 中

另外，在模块顶部添加以下代码。总的来说，它会如下所示

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

第 3 步： 在 app.module.ts 构造函数中：

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

第 4 步：在 app.module 中的 imports 下

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

第 5 步： 在 app.component.html 中进行测试。以github为例

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

使用ng s 运行它以查看您的更改。

【讨论】：