ionic 自定义图标

ionic自定义图标

概述

Ionic 框架中内置了很多图标，我们只需要引用 ionic icons 中的样式即可

 

 

Ionic tabs 示例工程中的 tab 图标

<ion-tab title="Chats" // ion-ios7-chatboxes-outline on-ios7-chatboxes 指的就是图标样式 icon-off="ion-ios7-chatboxes-outline"  icon-on="ion-ios7-chatboxes" href="#/tab/chats"> <ion-nav-view name="tab-chats"></ion-nav-view> </ion-tab>

但是有时我们需要自己的图标，因此我们需要定义自己的图标 比如

 

原理

Ionic 中内置的所有图标，都是通过字体文件以css 样式的方式引入

 

 

修改起来太麻烦

因此我们想要自己的图标，可以参照这种方式，定义自己的图标 ，自定义图标实际上就成了自定义字体，归纳起来可分为三步

1这里我们需要自己准备 svg格式的矢量图

2 生成字体文件

3 在CSS中引用字体文件

自定义图标操作步骤

 

A  将要生成的图标 做成svg格式详情可参见

 http://www.iconfont.cn/help/platform.html

B 到 https://icomoon.io/app/#/select网站生成图标

 

1 单击 import icons 按钮导入我们准备好的svg 图标集，或者Add  icons From Library 引用这个网站上的一些现成图标

阿里图标库：http://www.iconfont.cn/