Sencha Touch 2.2.1 Custom Icon 自定义图标
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 自定义图标的更多相关文章
- sencha touch 扩展篇之使用sass自定义主题样式 (下)通过css修改官方组件样式以及自定义图标
上一讲我们讲解了如何使用官方的api来修改主题样式,这讲我们继续讲解sass的样式修改, 编译官方自带的主题包 在生成的项目以及官方sdk的目录下,自带了一些主题sass包,我们也可以通过修改sas ...
- sencha touch 扩展篇之使用sass自定义主题样式 (上)使用官方的api修改主题样式
大家知道,sencha touch是通过我们写的js代码来动态渲染单页面生成一个个div+css的html页面来模拟app应用,那么既然是div+css结构的,我们就可以通过修改css样式来自定义我们 ...
- 【翻译】在Ext JS和Sencha Touch中创建自定义布局
原文:Creating Custom Layouts in Ext JS and Sencha Touch 布局系统是Sencha框架中最强大和最独特的一部分.布局会处理应用程序中每个组件的大小和位置 ...
- 第一步 使用sencha touch cmd 4.0 创建项目、打包(加入全局变量、公用类、自定义扩展、资源文件)
参考资料: http://www.cnblogs.com/qqloving/archive/2013/04/25/3043606.html http://www.admin10000.com/docu ...
- sencha touch 2.2.1 自定义彩色图标按钮(button+ico)
sencha touch 2.2.1 这个版本使用了新的按钮模式,不过他只提供了少部分的按钮样式.我们可以加一些自定义的ico样式 新加ico样式lower .x-button .x-button-i ...
- sencha touch打包成安装程序
为了更好地向大家演示如何打包一个sencha touch的项目,我们用sencha cmd创建一个演示项目,如果你的sencha cmd环境还没有配置,请参照 sencha touch 入门系列 (二 ...
- 跟我一起玩转Sencha Touch 移动 WebApp 开发(一)
1.目录 移动框架简介,为什么选择Sencha Touch? 环境搭建 创建项目框架,框架文件简介 创建简单Tabpanel案例 自定义图标的方式 WebApp产品测试和发布 HTML5离线缓存 发布 ...
- 跟我一起玩转Sencha Touch 移动 WebApp 开发1
跟我一起玩转Sencha Touch 移动 WebApp 开发(一) 1.目录 移动框架简介,为什么选择Sencha Touch? 环境搭建 创建项目框架,框架文件简介 创建简单Tabpanel案例 ...
- 【翻译】Sencha Touch 2入门:创建一个实用的天气应用程序之三
原文:Getting Started with Sencha Touch 2: Build a Weather Utility App (Part 3) 作者:Lee BoonstraLee is a ...
随机推荐
- 网站性能评分工具Yslow 使用教程
Yslow 这个工具相信无论是搞前端的攻城师或者是搞网站的站长都了解,Yslow 可比谷歌的PageSpeed 有名多了:那个百分制下的评分数据总让国人着迷,看来应试教育造的孽太深了.Jeff 认为的 ...
- Linux下用信号量实现对共享内存的访问保护
转自:http://www.cppblog.com/zjl-1026-2001/archive/2010/03/03/108768.html 最近一直在研究多进程间通过共享内存来实现通信的事情,以便高 ...
- MySQL基础 - 内置函数
Concat() 用于连接字段,一般DBMS使用+或者||. ex: 注意:上图中新检索出来的列名为'CONCAT(id, '->', name)'(实际上没有列名),这样虽然不影响在MySQL ...
- php基础10:字符串中插入变量
<?php //插入字符串 //1.双引号可以解析字符串中的变量:但是前后不能跟中文符号 $username = "gaoxiong"; echo "my name ...
- 2016北京PHP39期 ThinkPHP Discuz Dedecms 微信开发视频教程
2016北京PHP39期 ThinkPHP Discuz Dedecms 微信开发视频教程 所有项目均带有软件,笔记,视频,源码 日期 课程(空内容代表放假) 2015/7/10 星期五 开学典礼 ...
- 深入理解计算机系统家庭作业汇总 20135301&&20135328
深入理解计算机系统家庭作业 深入理解计算机系统第二章家庭作业 题目2.64 题目要求 判断二进制数偶数位是否有任意一位位为1,有的话返回1,否则返回0 解题过程 int any_even_one(un ...
- vs2010 “SetScrollSizes”: 找不到标识符
SetScrollSizes是CScrollView的成员函数,你的view类必须从CScrollView派生
- Unity导出的Xcode项目,iOS端管理摄像头的方法
Vuforia导出的工程中管理摄像头问题 在以前的篇幅中提到了unity端和iOS端的动态交互.现在出现了一个问题.因为设备上的摄像机是实例化过来的.并且是一个单例.unity虽然已经不再显示了.但是 ...
- 总体最小二乘(TLS)
对于见得多了的东西,我往往就习以为常了,慢慢的就默认了它的存在,而不去思考内在的一些道理.总体最小二乘是一种推广最小二乘方法,本文的主要内容参考张贤达的<矩阵分析与应用>. 1. 最小二乘 ...
- 『.Net』微软家的女儿们
在博客园看到了 一篇文章 <.NET4.0框架退休日期逐渐临近> 写下了这篇文章 —— 记录我和 .Net Framework 的 那些日子. 微软 家有几个 女儿. 2008年,我遇到他 ...