sencha touch2.3（sencha architect 3）内置icon图标

使用sass自定义sencha touch 图标

从sencha touch 2.2版本开始，原有的图片图标都被替换成了字体图标，网上的大部分教程都是2.2之前版本的，所以很多人参照那些教程达不到想要的效果，这里我们就来讲讲sencha touch 2.2版本之后的自定义图标的方法，

首先，我们了解下为什么要将图片图标替换为字体图标呢，大家知道，不同的移动设备会有不同的屏幕尺寸，不同的屏幕密度，不同的分辨率，原生开发中我们可以为不同的分辨率指定不同的图片，但是在html5开发中，要实现起来却比较困难，一张图片如果分辨率低了，那么在大屏高分辨率手机上就会模糊失真，因为图片图标是属于位图的，而使用自体图标能很好地解决这个问题，因为字体图标是矢量图，不管放大多少倍也不会失真，并且通过css样式就能轻松地改变它的大小跟颜色，另一方面，字体图标相对图片图标来说占用的内存会少很多，而且加载速度也比图片要快。

了解了为什么使用字体图标后，我们来看看如何在新版本的st中自定义icon图标

在sencha architect 3中，默认集成了pictos字体图标，对照图如下，上面为图标，下面为对应的content文本：

这些图标都是pictos字体中已经自带的，不过，为了减少css文件的大小，sencha touch默认只引入了小部分icon样式，如user，locate等

所以正题来了在sass 文件中编写代码

@include icon('name','对应的符号字母');或者

@include pictos-iconmask('name');

另外

一切做好之后编译sass文件   ，在sencha architect 中有集成的工具。

运行成功！