sencha touch 自定义图标

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

sencha touch 2.4.2

方式1、直接添加css

如图：添加图标的css

必须是sencha touch支持的图标

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

1.下载字体图标，例如：Icomoon，选择本身的图标，而后下载

 有了字体图标，就能够添加到webapp了

2.添加字体图标文件

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

b.把{webapp}\touch\resources\themes\fonts下的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}\resources\sass

执行 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