为什么要使用阿里巴巴矢量图标库 Iconfont?
- Iconfont 提供了近百万的图标,并且有多种使用方式
- 使用字体图标,相对图片占用空间小,更清晰,大小颜色更易控制
- ionic 官方提供的图标不够用,没有具体业务方面合适的图标
如何使用 Iconfont?
登录 Iconfont 官网
-
搜索图标并加入购物车
-
点击右上角购物车图标,点击"添加至项目",没有项目则会提示创建项目
-
在 APP 中使用图标:
- 使用链接方式
在图标管理 - 我的项目中编辑图标,并生成图标链接
复制生成的链接,并添加到 app 的 index.html 文件中。注意:给链接加上 http: 或 https:,否则在真机上显示不出来。
使用:
<ion-item> <ion-icon class="iconfont icon-zhifubao"></ion-icon> </ion-item> <ion-item> <ion-icon class="iconfont icon-jijianfasong-xianxing"></ion-icon> </ion-item>
- 下载到本地方式
挑选图标并下载到本地:
复制字体文件到项目中:
然后就可以使用图标了。