Question

我正在尝试在JHipster 5应用程序中添加/更改Font Awesome图标。我只能打印默认模板中已经存在的图标。

我可以更改：

   <fa-icon [icon]="'home'"></fa-icon>
            <span>
                <span jhiTranslate="global.menu.home">Home</span>
            </span>

收件人：

<fa-icon [icon]="'asterisk'"></fa-icon>
                <span>
                    <span jhiTranslate="global.menu.home">Home</span>
                </span>

但不能更改为

<fa-icon [icon]="'tv'"></fa-icon>
                <span>
                    <span jhiTranslate="global.menu.home">Home</span>
                </span>

或其他任何图标。是在某个地方定义的吗？

Answer 1

图标位于FALSE中，您可以在此处添加新图标。

Answer 2

对于Jhipster 6，用于定义要使用的图标的文件是 src / main / webapp / app / core / icons / font-awesome-icons.ts

Answer 3

完成亚历山大答案；

添加Twitter图标的示例：

（在“ jhipsterVersion”中：“ 5.1.0”）

阅读node_modules/@fortawesome/angular-fontawesome/README.md

yarn add @fortawesome/free-brands-svg-icons在src/main/webapp/app/vendor.ts
声明您的图标：

。

import { faTwitter } from '@fortawesome/free-brands-svg-icons';
library.add(faTwitter);

在您的html中使用并不要忘记告诉它来自fab（品牌）

。

<fa-icon [icon]="['fab', 'twitter']"></fa-icon>

也许您还应该重新运行webpack：build。但是对我来说直接起作用了

（请参阅src/main/webapp/app/vendor.ts的顶部）

/* after changing this file run 'yarn run webpack:build' */

Answer 4

如果您尝试像这样添加图标：

vendor.ts

import {
    // other imports
    faFileSignature,
    faLock
} from '@fortawesome/free-solid-svg-icons';

// other imports
library.add(faFileSignature);
library.add(faLock);

但是它不起作用，并且您收到一条错误消息，通知您不赞成使用全局样式，我已将其修复like this。

我创建了一个新的icon.module.ts，并将其导入了shared-libs.module.ts。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { fas } from "@fortawesome/free-solid-svg-icons";


@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    FontAwesomeModule
  ]
})
export class IconsModule {
  constructor(library: FaIconLibrary) {
    library.addIconPacks(fas);
  }
}

希望我能帮上忙。

如何在JHipster 5中显示图标？

4 个答案: