icon自定义图标

Ionic自定义图标

声明：这些都是参考其他大牛的教程，只是记录自己学习经历的文章。单纯为了以后可以回顾一下。所有教程都亲身试验过。

1. ionic本身有很多图标，这些矢量图标库都是ionic自定义好的矢量图标文件。等同于特殊字符。

菜鸟教程图标库：http://www.runoob.com/ionic/ionic-icon.html

Ionic矢量图标库： http://www.ionic-china.com/ionicons/index.html

2.

tabIcon后面跟的就是矢量图标库的类名称。只要更换名称就可以更换图标库中的图标

 

2. 如果想要自定义图标：

1）使用阿里巴巴矢量图标库：

   http://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2

   使用教程：https://www.jianshu.com/p/f6488850b6a2

   教程问题：

   主要参考教程，教程中第二种方法，从阿里巴巴图标库中下载图标使用的教程中，不要把iconfont.css中的代码复制到tab.scss中，要复制到 app.scss中做全局变量。

2）使用自定义图片作为tabbar的icon

   使用教程：http://blog.csdn.net/malonely/article/details/52777369

3）使用自己制作的图标制作成svg矢量文件后导入项目作为图标：

   使用教程：http://blog.csdn.net/pq1230/article/details/56667176

   制作矢量图工具网站：https://icomoon.io/app/#/select