时间戳

首页 > 解决方案 > 带有primeng 7或Angular 2+的angular-fontawesome 5图标

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

问题描述

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

标签： angularfont-awesomeprimengangular7font-awesome-5

解决方案

要将 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。

推荐阅读