角-方框5图标与原始7或角2+

Question

我已经按照指示使用svg图标的角-方框5图标.请找到下面的链接

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>

还是没有输出。请帮助如何将品牌图标内的primeng按钮。

Answer 1

要将字体与PrimeNG一起使用，您需要使用标准的字体包，而不是棱角字体。

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中，在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运行它来查看您的更改。