IONIC2-查看IONIC2自带的icons图标

转载自：http://blog.csdn.net/xuanhaiyang2008/article/details/71219169

1.使用name引用图标

ionic2自带有一套icons图标，使用方法如下： 
通过ionic2官方文档图标库，可查看到一系列的图标，这些图标可以通过name来实现的，点击需要的图标一行，可弹出窗口查看使用方法，如下图所示： 

<ion-icon name="add"></ion-icon>
1

用上述代码即可实现。

2.使用class引用图标

但是当我们需要的图标在这个页面中不存在该怎么办呢？首先我们需要查找到图标对应的class属性，但是在css、scss文件中又不能判断class属性对应的图标是什么，所以我想到去查找ionicons对应的字体文件。 
1.首先需要安装字体图标编辑工具，我使用的是FontCreater，下载地址：http://pan.baidu.com/s/1dE79FiD，已安装字体编辑工具的请忽略。 
2.在build文件中找到字体文件，使用工具打开.woff文件，可看到一系列的图标，找到需要的图表后，鼠标右键点击字形然后查看字形属性，可以看到字码点一栏，如下图所示： 
 
提取出字码点去掉$符号剩下的就是我们需要的内容：F1D2，然后就去build后的main.css文件中搜索F1D2，注意：在main.css文件中使用的时候是字母都是小写的，不出意外可以搜索到一个class属性：

.ion-ios-notifications-outline:before {  content: "\f1d2";}
1
2
3

然后使用如下：

<ion-icon class="ion-ios-notifications-outline"></ion-icon>
1

此时可在页面看到该图标了。

如果在.woff文件中没找到我们需要的图标的话，就需要另行想办法了，如果知道请告知一下，谢谢！

补充：如果没有图标或图标不符合我们的要求，可以自定义图标，参考这篇文章：ionic2 tabs 自定义图标