字体真棒 5 与角度

如何将font-awesome5与Angular(2+)一起使用？

我尝试在组件中添加它：

import {faChevronLeft, faChevronRight} from '@fortawesome/fontawesome-free-solid';
import fontawesome from '@fortawesome/fontawesome';
...
constructor(){
fontawesome.library.add(faChevronLeft, faChevronRight);
}

然后在 HTML 中：

<span class="fa" [class.fa-chevron-left]="direction==='left'" [class.fa-chevron-right]="direction==='right'"></span>

但这给了我一个圆圈闪烁的问号。

您有两个选择：

1.使用角度字体库

只需按照他们的github页面上的说明进行操作即可。

2.直接使用字体真棒5

确保已安装所有相关的 npm 包。
对于专业版软件包，请查看此内容。

导入相关图标：

import {faChevronLeft, faChevronRight} from '@fortawesome/fontawesome-free-solid';
import fontawesome from '@fortawesome/fontawesome';

将图标添加到全局范围内的fontawesome库中(而不是在组件的构造函数中)：
```
fontawesome.library.add(faChevronLeft, faChevronRight);
```

在 html 中使用它：

<span class="fas" [class.fa-chevron-left]="direction==='left'" [class.fa-chevron-right]="direction==='right'"></span>

注意 html 中的前缀：
- fasfontawesome-free-solid图标(也适用于fa)
```

```
- fontawesome-free-brands图标的fab
```

```
- farfontawesome-free-regular图标
```

```
- fontawesome-free-light图标的fal(专业版)
```

```

重要提示：

使用变量来定义fontawesome类是可以的，只要它只完成一次(在初始化时)。但是，如果变量更改其值，则不会反映在 html 中。请考虑以下示例：

<span class="fas fa-chevron-{{direction}}"></span>

这将在初始化时放置正确的图标，但如果之后方向发生变化，则不会反映。
这样做的原因是fontawesome 5用适当的svg替换了用fa ...分类的元素，一旦替换，任何变量都不会影响这一点。
如果您希望上面的 html 反映运行时更改，则必须像这样更改它：

<span *ngIf="direction==='right'"><span class="fas fa-chevron-right"></span></span>
<span *ngIf="direction==='left'"><span class="fas fa-chevron-left"></span></span>

外部span是必需的，因为内部span被替换为svg，因此您不能*ngIf放在上面。

延伸阅读：

将fontawesome 5与node一起使用.js
字体真棒 API

最简单的方法是通过 npm 安装它，然后导入样式：

npm i @fortawesome/fontawesome-free --save

2) 在angular.json中导入样式

"styles": [
...
"node_modules/@fortawesome/fontawesome-free/css/all.css"
...
]

然后，您可以按照其文档中的原样使用它

<i class="fas fa-address-card"></i>

我在 Angular 中使用 Font Awesome 5

这是 HTML 代码

<fa-icon [icon]="isFavorite ? ['fas','star'] : ['far','star']" (click)="onClick()"> Star </fa-icon>

这是我的组件

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'favorite',
templateUrl: './favorite.component.html',
styleUrls: ['./favorite.component.css']
})
export class FavoriteComponent implements OnInit {
isFavorite: boolean;
prefix:string;
constructor() { }    
ngOnInit() { }
onClick(){
this.isFavorite = !this.isFavorite;    
}
}
`

另一种使用 WebFont 或 SVG 在 Angular 中渲染 FontAwesome 5 的方法：

https://www.npmjs.com/package/@ui4ngx/fontawesome

演示

这使用 HTML 模板而不是 Javascript 渲染它提供了与角度字体真棒库相同的功能

对于旧版本 (v4)，您可以使用此

https://www.npmjs.com/package/@ui4ngx/fontawesome4

演示

1.使用角度字体库

2.直接使用字体真棒5

相关内容

最新更新

热门标签：