ionic自定义图标心得分享

有时候我们需要修改tabs或者其他的ionic的图标，虽然ionic系统提供了很多，但如果想使用其他的，之前以为只能用png来设置background，但效果并不好；最近发现了很好的方法，跟大家分享。

是无意中看到这个帖子add icons 才发现的。

1、两个网站

一个是 阿里图标库 这里面几乎能满足很多人的需要了http://www.iconfont.cn/

一个是 icomoon 下面提到https://icomoon.io/

2、ionic提供给我们的icon主要是放在www/lib/ionic/fonts/ 目录下的4各文件：ionicons.eot ionicons.svg ionicons.ttf ionicons.woff实现的，至于这四个文件是啥我也不是很懂，然后在ionic.css里面有定义各个图标；所以我们自定义的图标也应该一样，找到方式就剩怎么生成这4个文件(下面我叫它们“四贱客”)。

3、上面所说的icomoon这个网站主要就是用来生成“四贱客”用的，需要的原材料就一个svg文件够了，一般来说我是去阿里图标库上来找到的，你也可以去其他地方找，只要是svg文件，这里我下载了6个，一正一反共3对。

打开icomoon网站，注意看右上角有个 IcoMoon App ，点击进入到我们生成“四贱客”的地方。

左上角有个 Import Icons 按钮，上传刚刚下载的svg文件，上传完成后还需要勾选上(不勾选上的边框是灰色的)，如果不勾选上则生成的“四贱客”是不包含这个图标的。然后点击右下角的 Generate font按钮来生成“四贱客”。

生成“四贱客”成功后，icomoon会有一个24小时有效的css链接提供测试，当然我们需要的是下载“四贱客”，点击右下角的 Download下载“四贱客”压缩文件，至此，生成“四贱客”就完成了。

下载文件解压后，里面的fonts目录就是“四贱客”的存放的地方，还有个style.css，是类似ionic.css定义的文件，我们把fonts和style.css拷贝到ionic项目中，我这里是把fonts合并到www/lib/ionic/fonts/目录，style.css重命名为icomoon.css并放到www/lib/ionic/css/ 目录下，在index.html引入icomoon.css。

在tabs.html中使用就不多说了。

PS：这里要修改的一个小地方，打开icomoon.css，顶部的@font-face的src引用路径要正确，并且要把单引号改为双引号，不然显示不出来(不知道什么原因)。

最后效果图：