angular 使用ng-zorro添加iconfont图标
在本文章我使用的是symbol的方式,你也可以使用fontClass或者unicode方式,但据官方原话来说,symbol是以后的主流 方式,推荐使用。
另外,如果你不想借助ng-zorro,而是单纯使用angular引用iconfont,可以看我另一篇博客。
入口:angular9使用iconfont (symbol方式)
一.在线链接方式
- 首先登录iconfont.cn
- 选好 图标点击加入购物车,选好后在购物车中将所有图标加入项目
3.复制symbol在线链接
4.在使用的组件中引入NzIconService,生效,参考以下官网例子
import { Component } from '@angular/core';
import { NzIconService } from 'ng-zorro-antd/icon';
@Component({
selector: 'nz-demo-icon-iconfont',
template: `
<div class="icons-list">
<i nz-icon [nzIconfont]="'icon-tuichu'"></i>
<i nz-icon [nzIconfont]="'icon-facebook'"></i>
<i nz-icon [nzIconfont]="'icon-twitter'"></i>
</div>
`,
styles: [
`
[nz-icon] {
margin-right: 6px;
font-size: 24px;
}
`
]
})
export class NzDemoIconIconfontComponent {
constructor(private iconService: NzIconService) {
this.iconService.fetchFromIconfont({
scriptUrl: 'https://at.alicdn.com/t/font_8d5l8fzk5b87iudi.js'
});
}
}