nz-zero Icon图标的基本使用

【Icon图标】

基本使用：

使用<i nz-icon></i>标签声明组件，指定图标对应的nzType属性.可以通过nzTheme属性来设置不同的主题风格的图标，也可以通过设置nzSpin属性来实现动画旋转效果。对旧的API<i class=”antion”></i>兼容

首先这个图标很有意思它有几个基本的API接口，可以通过他们来运用不同的图标

[nzType] 这个是图标的类型，一般遵循图标的命名规范eg：眼睛就是[nzType]=”’eye’”

[nzTheme] 图标主题风格，可选实心、描线、双色’fill’|’outline’|’towtone’ eg:[nzTheme]=”’fill’”这个就会把图标全部填满

[nzSpin] 是否有旋转动画 eg:[nzSpin]=”’true’”

[nzTwotoneColor] 仅适用双色图标，设置双色图标的主要颜色默认蓝色 eg：[nzTwotoneColor]=”’#ff00ff’” 显示紫色。

[nzIconfont] 指定来自IconFont的图标类型

如果要使用Iconfont.cn [nzIconfont]需要导入一个包import { NzIconService } from 'ng-zorro-antd/icon';

然后出口是

constructor(private iconService: NzIconService)

{

this.iconService.fetchFromIconfont({

scriptUrl: 'https://at.alicdn.com/t/font_8d5l8fzk5b87iudi.js'

});

}

自定义图标：

需要你将svg标签直接放在nz-icon中渲染自定义内容

nz-zero Icon图标的基本使用相关推荐

如何快速的给你的项目添加icon图标
如何快速的给你的项目添加icon图标下载软件如何制作图片将制作的图标拖到项目当中设置启动页注意: 如果手动添加了启动页的话,记得将Launch Screen中的东西清除掉
用字体在网页中画Icon图标
第一步,下载.IcoMoon网站选择字体图标并下载,解压后将fonts文件夹放在工程目录下.fonts文件夹内有四种格式的字体文件: 注:由于浏览器对每种字体的支持程度不一致,要想在所有浏览器中都显示 ...
解决网页ICON图标无法显示的问题
解决网页ICON图标无法显示的问题参考文章: (1)解决网页ICON图标无法显示的问题 (2)https://www.cnblogs.com/ziyoublog/p/10974406.html 备忘 ...
UITabBar背景、icon图标颜色、被选中背景设置以及隐藏UITabBar的两种方式
一.对UITabBar背景和icon图标的一些设置 (1)因为直接给UITabBar设置的背景颜色显示的不纯,半透明的感觉,所以,有时候我们可以直接利用纯色的图片作为背景达到想要的效果: (2)给ic ...
qt修改程序图标名称_解决Qt应用程序添加icon图标，修改窗口图标以及添加系统托盘问题...
一.Qt应用程序添加icon图标的方法: 首先,我们需要先准备两个文件,一个是icon图标,另一个是rc文件,我分别命名为"myApp.rc"和"soft.ico&quo ...
Elementui icon图标不显示
文章目录需求原理实现效果 icon图标链接需求需要实现显示icon图标原理不显示的原因是项目中引入的element-ui的版本过低了,低版本的icon中没有代码中需要的图标, 在低版本 ...
在项目中增加自定义icon图标
以MUI框架为例,内容来自于MUI官网. mui如何增加自定义icon图标 mui框架遵循极简原则,在icon图标集上也是如此,mui仅集成了原生系统中最常用的图标:其次,mui中的图标并不是图片,而 ...
动态修改网页icon图标
动态修改网页icon图标 //如果在vue项目中在App.vue下的 created() 中输入 var link = document.querySelector("link[rel*= ...
layui弹出层：使用icon图标小结
文章目录 layui弹出层:icon图标小结表格示下: 调用代码 · 效果图 · 示下: layui弹出层:icon图标小结 layui的弹框插件layer中,有很多不同场景需要的弹框icon图标, ...
Qt5制作icon图标文件和发布程序简易介绍
制作icon图标文件 1.制作icon图标文件可以进入这个网站在线制作:http://www.ico.la/ 2.创建资源文件:qrc文件接着先添加前缀,然后添加文件最终结果: 3.可以用te ...

nz-zero Icon图标的基本使用

nz-zero Icon图标的基本使用相关推荐

最新文章

热门文章