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呢?其实比以前更简单了

比如说你想用第一排的第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');即可,然后运行

即可自动生成css文件

Sencha Touch 2.2.1 Custom Icon 自定义图标的更多相关文章

  1. sencha touch 扩展篇之使用sass自定义主题样式 (下)通过css修改官方组件样式以及自定义图标

    上一讲我们讲解了如何使用官方的api来修改主题样式,这讲我们继续讲解sass的样式修改, 编译官方自带的主题包  在生成的项目以及官方sdk的目录下,自带了一些主题sass包,我们也可以通过修改sas ...

  2. sencha touch 扩展篇之使用sass自定义主题样式 (上)使用官方的api修改主题样式

    大家知道,sencha touch是通过我们写的js代码来动态渲染单页面生成一个个div+css的html页面来模拟app应用,那么既然是div+css结构的,我们就可以通过修改css样式来自定义我们 ...

  3. 【翻译】在Ext JS和Sencha Touch中创建自定义布局

    原文:Creating Custom Layouts in Ext JS and Sencha Touch 布局系统是Sencha框架中最强大和最独特的一部分.布局会处理应用程序中每个组件的大小和位置 ...

  4. 第一步 使用sencha touch cmd 4.0 创建项目、打包(加入全局变量、公用类、自定义扩展、资源文件)

    参考资料: http://www.cnblogs.com/qqloving/archive/2013/04/25/3043606.html http://www.admin10000.com/docu ...

  5. sencha touch 2.2.1 自定义彩色图标按钮(button+ico)

    sencha touch 2.2.1 这个版本使用了新的按钮模式,不过他只提供了少部分的按钮样式.我们可以加一些自定义的ico样式 新加ico样式lower .x-button .x-button-i ...

  6. sencha touch打包成安装程序

    为了更好地向大家演示如何打包一个sencha touch的项目,我们用sencha cmd创建一个演示项目,如果你的sencha cmd环境还没有配置,请参照 sencha touch 入门系列 (二 ...

  7. 跟我一起玩转Sencha Touch 移动 WebApp 开发(一)

    1.目录 移动框架简介,为什么选择Sencha Touch? 环境搭建 创建项目框架,框架文件简介 创建简单Tabpanel案例 自定义图标的方式 WebApp产品测试和发布 HTML5离线缓存 发布 ...

  8. 跟我一起玩转Sencha Touch 移动 WebApp 开发1

    跟我一起玩转Sencha Touch 移动 WebApp 开发(一) 1.目录 移动框架简介,为什么选择Sencha Touch? 环境搭建 创建项目框架,框架文件简介 创建简单Tabpanel案例 ...

  9. 【翻译】Sencha Touch 2入门:创建一个实用的天气应用程序之三

    原文:Getting Started with Sencha Touch 2: Build a Weather Utility App (Part 3) 作者:Lee BoonstraLee is a ...

随机推荐

  1. win PPTP场景与搭建

    远程访问方案: 1,端口映射 2,vpn   实现这种远程访问的协议:pptp 等.     场景: 要从考试服务器[电信]下载题目. 单位有两个办事处,A双出口,B单网通出口. B要下载题,很慢. ...

  2. Linux下用信号量实现对共享内存的访问保护

    转自:http://www.cppblog.com/zjl-1026-2001/archive/2010/03/03/108768.html 最近一直在研究多进程间通过共享内存来实现通信的事情,以便高 ...

  3. C#使用IrisSkin2.dll美化WinForm程序界面

    一.添加控件IrisSkin2.dll. 方法:         1.右键“工具箱”.“添加选项卡”,取名“皮肤”.         2.右键“皮肤”,“选择项”弹出对话框        3.点击“浏 ...

  4. Qt中通过ui怎么引用不了pushbutton呢? 原来是这样…

    在Qt中打开一个项目在做, 突然想到要测量一下其中一个子系统,于是在当前环境下新建了一个项目并用qt designer 简单设计了一下ui,其中添加了pushbutton并命名为OpensourceB ...

  5. Linux常用指令---grep(搜索过滤)

    Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹 配的行打印出来.grep全称是Global Regular Expression Print,表示全局正则表达 ...

  6. 学习笔记——Maven实战(五)自动化Web应用集成测试

    自动化集成测试的角色 本专栏的上一篇文章讲述了Maven与持续集成的一些关系及具体实践,我们都知道,自动化测试是持续集成必不可少的一部分,基本上,没有自动化测试的持续集成,都很难称之为真正的持续集成. ...

  7. 端口扫描之王——nmap入门精讲(二)

    接着讲上节的内容,上节中提到了一个时间优化的问题是使用参数-n,通过不解析地址来进行优化时间的,但是优化时间的方法还有很多,比如说我们可以通过时间优化(0-5),指定单位时间内的探针数,设置组的大小 ...

  8. Dandelion - Distributed Computing on GPU Clusters

    linq on GPUs 非常期待中 看起来很cool,期望早点面世

  9. 简单的3个SQL视图搞定所有SqlServer数据库字典

    网上有很多SQL SERVER数据库字典的SQL语句,七零八落,我在工作整理了一下思路,总结SQL代码如下.数据库字典包括表结构(分2K和2005).索引和主键.外键.约束.视图.函数.存储过程.触发 ...

  10. 软件工程(QLGY2015)第一次作业小结(含成绩)

    相关博文目录: 第一次作业点评 第二次作业点评 第三次作业点评 Github项目提交 github的代码提交,大部分人都只是提交了单个文件,存在几个问题 请提交完整的项目文件到github 问题:为什 ...