Sencha Touch 2.2.1 Custom Icon 自定义图标

时间:2023-03-08 16:32:50

ST2.2版本竟然又改变了sass中自定义图标的添加方式,在2.2以前采用的是这种base64的方式,详见:http://www.cnblogs.com/qidian10/archive/2012/11/19/2776953.html

但ST2.2.1中所有的图标icon都采用字体的形式展现,也就是说你看到的并不是图片,而是一种字体。

Sencha Touch采用http://pictos.cc/font/作为图标库,类似的字体图标库还有很多。

那么采用font的形式,我们如何自定义自己的icon呢?其实比以前更简单了

Sencha Touch 2.2.1 Custom Icon 自定义图标

比如说你想用第一排的第3个图标,那么它对应的字符是“c”,你只需要将下面的css加入到自己的app.css文件中即可。

.x-tab .x-button-icon.chat:before,.x-button .x-button-icon.chat:before{position:absolute;top:;right:;bottom:;left:;text-align:center;font-family:"pictos";content:"c"}

当然你也可以采用以前的compass的方式,只需要在sencha-touch.scss文件中添加@include icon("upload",'c','pictos');即可,然后运行

Sencha Touch 2.2.1 Custom Icon 自定义图标

即可自动生成css文件