sencha touch 自定义图标

原文地址 http://blog.csdn.net/lovelyelfpop/article/details/20392429

sencha touch 2.4.2

方式一、直接添加css

如图：添加图标的css

必须是sencha touch支持的图标

方式二：图标字体(icon font)

1.下载字体图标，例如：Icomoon，选择自己的图标，然后下载

 有了字体图标，就可以添加到webapp了

2.添加字体图标文件

a.进入{webapp}/resources/fonts/（没有就创建一个），创建iconmoon文件夹。解压下载的图标文件，把/fonts下的四个文件复制在新建的iiconmoon文件下;

b.把{webapp} ouch esources hemesfonts下的pictos文件夹也复制到{webapp}/resources/fonts/下

最终的文件结构如图：

3.用记事本打开{webapp}/resources/sass/config.rb，编辑如下：

 

4.用记事本打开{webapp}/resources/sass/app.scss，编辑如下：

其中'e90d'就是图标

5.重新编译app.css文件

这个前提要安装compass ,cmd 命令： npm install -g compass

cd {webapp} esourcessass

执行 compass compile

出现以下截图说明创建成功

可能出现的问题：

如果执行 compass compile 出现的是

说明生成失败，你的compass没有包含compass-bluprint

你可以执行gem install compass-blueprint 进行安装，但是compass compile 还是报错；

新版的 compass已经不包含 compass-blueprint，我的解决方案是卸载，再安装0.12.2  版本的compass

gem uninstall compass-blueprint 

gem uninstall sass  

gem uninstall compass 

gem install sass -v 3.2.12  

gem install compass --version 0.12.2  

在执行 compass compile 生成app.css