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

Question

我已经按照说明使用了角字体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';

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

<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>

仍然没有输出。请帮助将品牌图标带入按钮中。

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 。

Answer 2

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

假设您只想使用品牌图标

第 1 步：

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

第 2 步：

在 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 中，在导入下

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 运行它以查看您的更改。