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