700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 如何在angular中使用iconfont字体图标?

如何在angular中使用iconfont字体图标?

时间:2023-03-10 09:05:18

相关推荐

如何在angular中使用iconfont字体图标?

一、登录iconfont,将要用的图标添加购物车后,添加至自己的项目中;

二、点击下载至本地,打开压缩包,在assest文件夹下新建一个fonts的文件夹

三、把后缀为 .eot .svg .ttf .woff的文件放在下面;

四、把iconfont.css放在此文件下 也可新创建一个文件夹放入;

五、然后把.iconfont{}这段内容换成

[class^="icon-"], [class*=" icon-"] {/* use !important to prevent issues with browser extensions that change fonts */font-family:'iconfont'!important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;font-size:1rem;/* Better Font Rendering =========== */-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}

六 在angular.jsonw中styles下引入(注意路径)

七、页面使用

<button nz-button nzType="primary" (click)="adds()"><i class="iconfont icon-tag27fuben"></i>新增</button><button nz-button nzType="primary" (click)="delete()"><i class="iconfont icon-shanchu"></i>删除</button>

八、重新执行 ng serve ,刷新页面,图标引用成功

如图:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。