found conf custom cmd svg logs 頁面 一個 會有

自定義圖標的方法

Sencha touch自帶圖標有限，有時需要自己添加圖標。下面介紹自定義圖標的方法： 首先需要生成圖標字體。有許多網站提供在線生成圖標字體的功能，比如IcoMoon，通過這個網站，你可以選擇自己需要的圖標，然後打包下載下來。 1、進入IcoMoon，看到如下圖的頁面，點擊"Custom Built and Crisp Icon Fonts, Done Right"

2、選擇需要的圖標，點擊下面的"Font>"，即生成字體

3、點擊"Download"，即可下載

4、有了字體，我們就可以添加到我們的webapp中去了。 進入目錄{webapp}/resources/fonts/（沒有就創建），新建一個文件夾，比如"iconmoon"，把第三步中下載的字體壓縮包\fonts底下的四個文件解壓到這個文件夾下。 5、記事本打開{webapp}/resources/sass/config.rb，添加下圖的代碼 提示: 因為我們加了一句 fonts_path， 最後生成css的時候可能會報錯"Pictos fonts not found"。所以把 {webapp}/touch/resources/themes/fonts/pictos文件夾復制到{webapp}/resources/fonts/目錄下。

這時候{webapp}/resources/fonts/目錄下應該有如下結構：

6、記事本打開{webapp}/resources/sass/app.scss，添加下圖的代碼

‘\e600‘就是圖標

7、重新編譯生成新的app.css文件（將SASS, 即 scss 文件，編譯成css文件）

進入cmd，執行： 編譯css，需要compass這個命令行工具，執行gem install compass安裝 cd {webapp}\resources\sass compass compile 成功後會有如下提示，說明已成功生成新的app.css 總結：

• 使用一個在線工具生成圖標字體，如IcoMoon、Fontello
• 將4個字體文件放到 {webapp}/resources/fonts/底下
• 在config.rb中添加fonts_path，以便Compass編譯的時候可以找到你的字體
• 復制{webapp}/touch/resources/themes/fonts/pictos 到 {webapp}/resources/fonts，避免編譯的時候找不到默認pictos字體而報錯
• 在app.scss中Import你的字體
• Compass編譯

推薦幾個查看和編輯字體的工具：

1、FontGrapher：支持ttf，不支持svg、woff和woff2

2、FontLab Studio：支持ttf，不支持svg、woff和woff2

3、FontForge：支持ttf、svg、woff，不支持woff2

sench touch 自定義小圖標（轉）