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. 思科简单教程CCNA

    这是CCNA的内容,从PC配置交换机(或者路由器),这里呢我们使用的软件叫pack 这是ciso开发的一款工具,能生动形象的模拟现实生活中组网技术的过程,下面我大概讲一下流程,想更多的了解我会录制一些 ...

  2. GeoServer+MySQL安装及配置过程

    GeoServer的安装配置请参考 http://simen-net.iteye.com/blog/609078 由于大部分WEBGIS不仅仅只是一个地图的显示,还需要一些业务处理,会有用到数据库地方 ...

  3. flask 使用 SQLAlchemy 的两种方式

    1. 使用 flask-SQLAlchemy 扩展 # flask-ext-sqlalchemy.py from flask import Flask from flask.ext.sqlalchem ...

  4. JS函数调用的方法

    JS函数调用的四种方法:方法调用模式,函数调用模式,构造器调用模式,apply,call调用模式 1.方法调用模式:先定义一个对象,然后在对象的属性中定义方法,通过myobject.property来 ...

  5. 玩转数据库之 Group by Grouping

    有的时候我们要从数据库里把数据组织成树结构再展现到页面上 像下面这样 今天我们用Group 和Grouping实现它,并总结一下它俩. 先看一下概念,再用代码一点一点去理解它们,最后我会给出完整的代码 ...

  6. 通过词法分析实现的指出C程序中包含的头文件

    在阅读有些程序的源码时,很希望能够马上弄清楚源码中到底包含了哪些头文件,以确定是否需要为了特殊的函数而手动加入#include.借助flex的词法分析实现了这一功能,本质上就是对正则表达式的匹配.注意 ...

  7. 第七章 new的三步曲

    这章是本系列文章的重点,这章揭示了js对象的真正本质 看下面的事例 var a = new b(); 等价于 ①var a={}; ②a.__proto__=b.prototype; ③b.call( ...

  8. Git.Framework 框架随手记--ORM项目工程

    前面已经简单介绍过了该框架(不一定是框架),本文开始重点记录其使用过程.可能记录的内容不是太详尽,框架也可能非常烂,但是里面的代码句句是实战项目所得.本文非教唆之类的文章,也非批判之类的文章,更不是炫 ...

  9. [USACO2004][poj1985]Cow Marathon（2次bfs求树的直径）

    http://poj.org/problem?id=1985 题意:就是给你一颗树,求树的直径(即问哪两点之间的距离最长) 分析: 1.树形dp:只要考虑根节点和子节点的关系就可以了 2.两次bfs: ...

  10. 每天一个linux命令（33）：ps命令

    Linux中的ps命令是Process Status的缩写.ps命令用来列出系统中当前运行的那些进程.ps命令列出的是当前那些进程的快照,就是执行ps命令的那个时刻的那些进程,如果想要动态的显示进程信 ...