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. ASP.Net MVC如何访问的静态页面

    MVC开发中,因为View文件夹下的web.config文件默认会把任何方法的请求的任何文件,路径都交给 System.Web.HttpNotFoundHandler 去处理.起到Controller ...

  2. Linux常用指令---工作

    查看所有用户cat /etc/passwd 复制整个目录cp -ri A/B/* A1/B1/ 若复制过程中询问是否覆盖,输入y按回车 另外若A A1不在同一目录下,最好填绝对路径,就是/xxx/xx ...

  3. 九度oj-1003-Java

    题目描述: 给定两个整数A和B,其表示形式是:从个位开始,每三位数用逗号","隔开. 现在请计算A+B的结果,并以正常形式输出. 输入: 输入包含多组数据数据,每组数据占一行,由两 ...

  4. 如何启动一个已经创建的docker 容器，并进入SHELL 对其操作

    腾讯云使用自己的docker镜像安装后无法启动,下边这个亲测是可用的 sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys 36A ...

  5. HoloLens开发手记 - Unity之摄像头篇

    当你穿戴好HoloLens后,你就会处在全息应用世界的中心.当你的项目开启了"Virtual Reality Support"选项并选中了"Windows Hologra ...

  6. abstract virtaul override new 及多态

    abstract abstract 修饰符可以和类.方法.属性.索引器及事件一起使用.在类声明中使用 abstract 修饰符以指示某个类只能是其他类的基类.标记为抽象或包含在抽象类中的成员必须通过从 ...

  7. unity3d 扩展NGUI Tweener —— TweenFillAmount

    好久没写博客了,上一篇是在今年上班之前写的 从年初到现在一篇没写过,每天都在加班,实在太忙了 上班半年多了,学到不少东西 今天分享一下刚写的小功能 TweenFillAmount 用过NGUI Twn ...

  8. Entity Framework若干个扩展

    声明 这里有此东西是参考各大神修改和补充而来,有些地方就找不到原文章的地址了,一参考地址如下: http://www.cnblogs.com/ahui/archive/2011/08/04/21272 ...

  9. 09.C#委托转换和匿名方法(五章5.1-5.4)

    今天将书中看的,自己想的写出来,供大家参考,不足之处请指正.进入正题. 在C#1中开发web form常常会遇到使用事件,为每个事件创建一个事件处理方法,在将方法赋予给事件中,会使用new Event ...

  10. Beta冲刺阶段

    Beta冲刺阶段 现阶段工作安排以及问题解决 Struts2框架配置 网上下载Struts 2 的框架代码,按照书上教程进行配置 遇到的问题:书上配置过程和实际操作有出入,按照书上过程无法完成配置过程 ...