sencha touch 2.3 自定义图标字体

程序使用sencha cmd创建，sdk版本是2.3.1。创建自定义图标字体。

1.确保能执行compass compile --trace，即需要安装ruby,sass,compass等，安装过程这里不再赘述。

2.准备好程序需要的图标(svg格式)。

3.到 https://icomoon.io/app 中将svg格式图标转换成字体图标(woff,ttf等)。

a.导入(左上角 Import Icons)我们的图片，并且选中我们要生成的字体图标(选中的图标会有个黄色的外框)。

b.点击右下角 generate font 按钮，下载生成的图标字体。（这个按钮上有个齿轮的小图片，可以设置导出的图标字体的名字）。

4.复制下载的文件夹下的fonts文件夹，拷贝到sencha app的 approot/resources/sass/stylesheets/fonts/里面，

修改复制的文件夹名称fonts为其他名字(pencilbox),

比如完整路径 approot/resources/sass/stylesheets/fonts/pencilbox/pencilbox.woff等。

5.编辑approot/resources/sass/app.scss文件。

@include icon-font('Pencilbox', inline-font-files('pencilbox/pencilbox.woff', woff, 'pencilbox/pencilbox.ttf',

truetype,'pencilbox/pencilbox.svg', svg));

@include icon('pencilbox','\e900','Pencilbox');

注意：

a.icon-font第一个参数是字体名称(font-family)

b. icon 第一个参数是图标名称(css class name),这个参数可直接用于iconCls ，类似home , info 等内置图标

c. icon 第二个参数是从刚才生成的网站icomoon.io/app中获得的图标编码。即在点击 generate font按钮出现的页面上

鼠标放在每个图标上时下方会出现 <>Get Code按钮，点击之后弹出代码框 \e900 就是图标编码

(其实在下载的包里面打开demo.html也能看到)

d.icon 第三个参数是前面字体名称(font-family)。

6. 命令行进入approot/resources/sass/ 执行compass compile --trace 执行成功即可使用

到这里基本上就可以来， 写在这里免得以后忘记了。大家也可以看看这片文章。 http://www.tuicool.com/articles/MZbqmu