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

Question

我已按照说明使用 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 按钮中。

Answer 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了解更多信息。