Iconfont -- 阿里巴巴矢量图标库的使用

为什么要使用阿里巴巴矢量图标库 Iconfont？

• Iconfont 提供了近百万的图标，并且有多种使用方式
• 使用字体图标，相对图片占用空间小，更清晰，大小颜色更易控制
• ionic 官方提供的图标不够用，没有具体业务方面合适的图标

如何使用 Iconfont？

1. 登录 Iconfont 官网

2. 搜索图标并加入购物车

   搜索图标并加入购物车

3. 点击右上角购物车图标，点击"添加至项目"，没有项目则会提示创建项目

   将图标添加至项目

4. 在 APP 中使用图标：

   1. 使用链接方式

   在图标管理 - 我的项目中编辑图标，并生成图标链接

   生成图标链接

   复制生成的链接，并添加到 app 的 index.html 文件中。注意：给链接加上 http: 或 https:，否则在真机上显示不出来。

   复制生成的 css 链接
   在 index.html 添加 css 链接

   使用：

   <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>
   

   2. 下载到本地方式

   挑选图标并下载到本地：

   下载到本地

   复制字体文件到项目中：

   本地文件
   复制字体文件到项目
   在 index.html 中引入

   然后就可以使用图标了。