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. 网站性能评分工具Yslow 使用教程

    Yslow 这个工具相信无论是搞前端的攻城师或者是搞网站的站长都了解,Yslow 可比谷歌的PageSpeed 有名多了:那个百分制下的评分数据总让国人着迷,看来应试教育造的孽太深了.Jeff 认为的 ...

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

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

  3. MySQL基础 - 内置函数

    Concat() 用于连接字段,一般DBMS使用+或者||. ex: 注意:上图中新检索出来的列名为'CONCAT(id, '->', name)'(实际上没有列名),这样虽然不影响在MySQL ...

  4. php基础10:字符串中插入变量

    <?php //插入字符串 //1.双引号可以解析字符串中的变量:但是前后不能跟中文符号 $username = "gaoxiong"; echo "my name ...

  5. 2016北京PHP39期 ThinkPHP Discuz Dedecms 微信开发视频教程

    2016北京PHP39期 ThinkPHP Discuz Dedecms 微信开发视频教程 所有项目均带有软件,笔记,视频,源码 日期   课程(空内容代表放假) 2015/7/10 星期五 开学典礼 ...

  6. 深入理解计算机系统家庭作业汇总 20135301&&20135328

    深入理解计算机系统家庭作业 深入理解计算机系统第二章家庭作业 题目2.64 题目要求 判断二进制数偶数位是否有任意一位位为1,有的话返回1,否则返回0 解题过程 int any_even_one(un ...

  7. vs2010 “SetScrollSizes”: 找不到标识符

    SetScrollSizes是CScrollView的成员函数,你的view类必须从CScrollView派生

  8. Unity导出的Xcode项目,iOS端管理摄像头的方法

    Vuforia导出的工程中管理摄像头问题 在以前的篇幅中提到了unity端和iOS端的动态交互.现在出现了一个问题.因为设备上的摄像机是实例化过来的.并且是一个单例.unity虽然已经不再显示了.但是 ...

  9. 总体最小二乘(TLS)

    对于见得多了的东西,我往往就习以为常了,慢慢的就默认了它的存在,而不去思考内在的一些道理.总体最小二乘是一种推广最小二乘方法,本文的主要内容参考张贤达的<矩阵分析与应用>. 1. 最小二乘 ...

  10. 『.Net』微软家的女儿们

    在博客园看到了 一篇文章 <.NET4.0框架退休日期逐渐临近> 写下了这篇文章 —— 记录我和 .Net Framework 的 那些日子. 微软 家有几个 女儿. 2008年,我遇到他 ...