我已经按照此处的说明安装了angular-fontawesome: https://www.npmjs.com/package/@fortawesome/angular-fontawesome
以这种方式使用时会显示图标(app.component.html):
<div style="text-align:center">
<!-- simple name only that assumes the 'fas' prefix -->
<fa-icon icon="coffee"></fa-icon>
<!-- ['fas', 'coffee'] is an array that indicates the [prefix, iconName] -->
<fa-icon [icon]="['fas', 'coffee']"></fa-icon>
<fa-icon [icon]="['fa', 'fa-fw', 'fa-book']"></fa-icon>
</div>
我的app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ButtonModule } from 'primeng/button';
import { MenuModule } from 'primeng/menu';
import { TabMenuModule } from 'primeng/tabmenu';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
import { TestcomponentComponent } from './testcomponent/testcomponent.component';
@NgModule({
declarations: [
AppComponent,
TestcomponentComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
HttpClientModule,
ButtonModule,
MenuModule,
TabMenuModule,
FontAwesomeModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
constructor() {
// Add an icon to the library for convenient access in other components
library.add(fas, far);
}
}
但是,将其与PrimeNg模块(在本例中为TabMenuModule)集成时,没有任何图标。请勿执行任何异常操作,只需按照此处的说明进行操作: https://www.primefaces.org/primeng/#/tabmenu
app.component.ts
export class AppComponent {
title = 'ClientApp';
private items: MenuItem[];
ngOnInit() {
this.items = [
{label: 'Overview', icon: 'fa fa-fw fa-bar-chart'},
{label: 'Schedule', icon: 'fa fa-fw fa-calendar'},
{label: 'Documentation', icon: 'fa-coffee'},
{label: 'Support', icon: 'fa fa-fw fa-support'},
{label: 'Discussion', icon: 'fa fa-fw fa-twitter'}
];
}
我将这些行添加到html的顶部:
<h3 class="first">Default</h3>
<p-tabMenu [model]="items1" [activeItem]="items1[0]"></p-tabMenu>
<h3>Templating</h3>
<p-tabMenu [model]="items2" [activeItem]="activeItem">
<ng-template pTemplate="item" let-item let-i="index">
<div style="position: relative; text-align: center; min-width: 10em">
<div class="ui-menuitem-icon" [ngClass]="item.icon" *ngIf="item.icon" style="font-size: 2em"></div>
<div class="ui-menuitem-text">
{{item.label}}
</div>
<a tabindex="0" class="ui-menuitem-icon" (click)="closeItem($event, i)" style="position: absolute; right: -1em; top: -.5em; padding: 0" *ngIf="i !== 0">
<span class="pi pi-times"></span>
</a>
</div>
</ng-template>
</p-tabMenu>
<p-tabMenu [model]="items"></p-tabMenu>
<i class="far fa-chart-bar"></i>
angular.json:
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/ClientApp",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/nova-light/theme.css",
"node_modules/primeng/resources/primeng.min.css",
"src/styles.css"
],
我正在使用: 角CLI:8.0.2 节点:10.15.3 操作系统:win32 x64 角度:8.0.0 angular-fontawesome@0.4.0 free-solid-svg-icons@5.9.0 free-regular-svg-icons@5.9.0
答案 0 :(得分:0)
尝试将这些 css 条目添加到您的 style.scss 文件中,这就是我的情况。
@import "~primeicons/primeicons.css";
@import "~primeng/resources/themes/saga-blue/theme.css";
@import "~primeng/resources/primeng.min.css";
@import "~primeflex/primeflex.css";