在 Angular 项目中高效集成 FontAwesome，从安装到进阶用法
npm install @fortawesome/angular-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/fontawesome-svg-coreimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faHome, faUser, faGear } from '@fortawesome/free-solid-svg-icons';
library.add(faHome, faUser, faGear);
@NgModule({
imports: [FontAwesomeModule],
// ...
})
export class AppModule { }// 在 Angular 模板中使用 FontAwesome 图标
import { Component } from '@angular/core';
import { faHome, faUser, faGear } from '@fortawesome/free-solid-svg-icons';
@Component({
selector: 'app-demo',
template: `
<div>
<fa-icon [icon]="faHome"></fa-icon>
<fa-icon [icon]="faUser" size="2x"></fa-icon>
<fa-icon [icon]="faGear" [spin]="true"></fa-icon>
<fa-icon [icon]="['fas', 'house']"></fa-icon>
</div>
`
})
export class DemoComponent {
faHome = faHome;
faUser = faUser;
faGear = faGear;
}| 属性 | 类型 | 说明 | 示例 |
|---|---|---|---|
icon | IconDefinition | 图标对象，必填 | [icon]="faHome" |
size | string | 图标尺寸，从 xs 到 10x | size="2x" |
spin | boolean | 连续旋转 | [spin]="true" |
pulse | boolean | 8 步脉冲旋转 | [pulse]="true" |
fixedWidth | boolean | 固定宽度图标 | [fixedWidth]="true" |
flip | string | 翻转方向 | flip="horizontal" |
rotation | number | 旋转角度 | [rotation]="90" |
classes | string[] | 附加 CSS 类名 | [classes]="['custom']" |
// 在 Angular 组件模板中使用 FontAwesome 图标
@Component({
template: `
<nav class="sidebar">
<a *ngFor="let item of navItems" [routerLink]="item.path">
<fa-icon [icon]="item.icon" fixedWidth></fa-icon>
{{ item.label }}
</a>
</nav>
`
})
export class SidebarComponent {
navItems = [
{ icon: faHouse, label: 'Home', path: '/' },
{ icon: faUser, label: 'Profile', path: '/profile' },
{ icon: faGear, label: 'Settings', path: '/settings' },
];
}// 根据组件状态动态切换图标
@Component({
template: `
<button (click)="toggle()">
<fa-icon [icon]="liked ? faHeartSolid : faHeartRegular"
[style.color]="liked ? 'red' : 'gray'"
size="2x"></fa-icon>
</button>
`
})
export class HeartComponent {
liked = false;
faHeartSolid = faHeartSolid;
faHeartRegular = faHeartRegular;
toggle() { this.liked = !this.liked; }
}