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. Use CLR Profiler

    Use CLR Profiler 第一次翻译对我而言比较长的E文,有很多不足之处,请见谅.(个人的习惯GC又做了名词又做了名词) 原文:http://msdn.microsoft.com/en-us/ ...

  2. MySQL基础 - 外键和约束

    在工作中经常会遇到不少不同的观点,比如对于数据库来说那就是是否要设置外键,设置外键的理由自然不必多说,而不设置外键的理由多半为设置外键影响性能,但就目前工作来讲,还没有涉及到因为外键而引发的数据库瓶颈 ...

  3. php基础30：正则匹配-量词

    <?php //正则表达式 //1.第一个正则表达式 if("a"=="a"){ echo "equal"; }else{ echo ...

  4. python package 的两种组织方式

    方式一/package1/ .../__init__.py # 空文件 .../class1.py class Class1: def __init__(self): self.name = &quo ...

  5. pyqt5界面与逻辑分离--信号槽的装饰器实现方式

    本文展示了 pyqt5 信号槽的装饰器实现方式(借鉴自 eirc6) 一个简单的例子.实现功能:两个数相加,显示结果.如图 两个文件,第一个是界面文件 ui_calc.py # ui_calc.py ...

  6. 2016喜剧《死侍》韩版.HD720P中英双字

    导演: 蒂姆·米勒编剧: 略特·里斯 / 保罗·沃尼克 / 费边·尼谢萨 / 罗伯·莱菲尔德主演: 瑞恩·雷诺兹 / 莫蕾娜·巴卡林 / 艾德·斯克林 / T·J·米勒 / 吉娜·卡拉诺 / 更多.. ...

  7. C#中 += (s, e) => 这些字符什么意思

    public MainWindow(){InitializeComponent();this.Loaded += (s, e) => DiscoverKinectSensor();this.Un ...

  8. Servlet响应的中文字符集问题

    在Servlet中利用response向客户端浏览器输出中文时有时会遇到乱码问题,总结如下: response输出流有两种,一是以字节流输出,一是以字符流输出. 一.以字节流输出: 1.默认编码输出木 ...

  9. 最新app store 应用提交经验分享

    由于之前提交实在3月份的时候,后来长时间没有提交了,最近又需要提交,发现苹果已经发生翻天覆地的变化了,真是跟不上时代了啊.... 之前提交的基本也是从网上看的,前面的证书安装部分其实基本是一样的没什么 ...

  10. 关于1Byte 1K 1M 1G(换算)

    1个字节等于8位二进制 .... 1byte=8bit 1K = 1024 byte =1024byte*8b 说白一点就是 1M等于1024个K组成,而1K又等于1024B,所以1M等于1024K乘 ...