[ExtJS5学习笔记]第五节 使用fontawesome给你的extjs5应用增加字体图标
本文地址:http://blog.csdn.net/sushengmiyan/article/details/38458411
本文作者:sushengmiyan
-------------------------------------------------资源链接--------------------------------------------------------
FontAwesome glyph编码:http://fortawesome.github.io/Font-Awesome/cheatsheet/
使用图标美化按钮: http://blog.csdn.net/jfok/article/details/35994081
use font awesome Icons in Ext js : http://extjs.eu/using-font-icons-in-ext-fontawesome/
--------------------------------------------------------------------------------------------------------------------
前期准备:
-------------
1.了解sencha cmd
2.了解Ext JS 5
即可以完成http://blog.csdn.net/sushengmiyan/article/details/38313537 内容即可顺利进入本节学习。
第二节结束后,我们可以使用sencha cmd构建一个项目,一般来说,网站对于美工要求是比较多的,看起来舒适的网店大家都愿意上。使用sencha cmd 自动构造出来的程序,按钮就是一个普通的按钮,面板也是普通的面板,如果我想对按钮增加一个图标,是不是会更好看呢?本节介绍一种简单的给ext js程序增加fontawesome提供的图标的方法。
Font Awesome简介
--------------------------
Font Awesome是一款很流行的字体图标工具。随着Bootstrap的流行而逐渐被人所认识,现在FontAwesome不仅仅可以在bt上使用,还可以应用在各种web前端开发中。相对于传统的使用背景图片作为图标,字体图标主要是支持自适应、可以使用字体的各种特性(比如变色、变大变小、字体阴影等)、减少数据加载、样式更容易定义等。
官网:http://fortawesome.github.io/Font-Awesome/
最新版本:4.1
在Ext js中使用 Font Awesome
----------------------------------------
在Ext中使用Font Awesome 非常简单,首先我们需要下载Font Awesome压缩包
1.下载Font Awesome压缩包。
下载地址:http://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.1.0.zip
点击下载,或者进入官网下载最新版本即可。
2.解压缩文件到应用程序目录。
下载之后,我们可以看到font-awesome-4.1.0.zip这样的zip压缩包,解压缩,可以看到有如下目录:
我们只需要其中的css目录和fonts目录即可。
解压到应用程序目录,即有.sencha文件夹的这个目录,我解压之后如下:
3.将css文件引入我们的项目
打开项目中的index.html文件,加入如下代码:
<link type="text/css" rel=" stylesheet" href="css/font-awesome.css"">
4.给按钮等增加图标
好,准备工作完成,现在就将好看的图标增加进程序,先跟我一起修改app\view\main文件夹下的Main.js文件
用editPlus打开,大约是在32行和33行。
我们将button的值改成了保存,然后增加了一个glyph属性,这样的话运行效果如下:
5.疑惑解释
对于button和面板等来说,都存在glyph这个属性,我们可以通过这个属性给按钮等加好看的图标。
后面跟着的是一串字符码,这个字符码我们如何获取呢?
glyph码获取: http://fortawesome.github.io/Font-Awesome/cheatsheet/
对于每一个版本都有对于的cheatsheet页面,我们到这里面找我们喜欢的图标,然后比对后面的字码即可。
Every Font Awesome 4.1.0 Icon, CSS Class, & Unicode :http://fortawesome.github.io/Font-Awesome/cheatsheet/
另一种简化实现:
如果说,每次都键入'xf0c7@FontAwesome'后缀@FontAwesome比较繁琐,那么你可以在程序加载的时候指定字体格式。
如在Mian.js中的initComponent函数值中增加Ext.setGlyphFontFamily('FontAwesome');那么后期使用的时候就可以不加后缀啦。
但是需要注意的是,这样操作之后,就不可以使字符串形式了,需要是数字形式了。如:
设置全局字体文件
简化之后的glyph处理
[ExtJS5学习笔记]第五节 使用fontawesome给你的extjs5应用增加字体图标的更多相关文章
- [ExtJS5学习笔记]第五节 使用fontawesome给你的extjs5应用添加字体图标
本文地址:http://blog.csdn.net/sushengmiyan/article/details/38458411本文作者:sushengmiyan-------------------- ...
- [ExtJS5学习笔记]第四节 欢迎来到extjs5-手把手教你实现你的第一个应用
本文地址:http://blog.csdn.net/sushengmiyan/article/details/38331347 本文作者:sushengmiyan ------------------ ...
- [ExtJS5学习笔记]第十七节 Extjs5的panel组件增加accodion成为折叠导航栏
本文地址:http://blog.csdn.net/sushengmiyan/article/details/39102335 官方例子:http://dev.sencha.com/ext/5.0.1 ...
- [ExtJS5学习笔记]第十节 Extjs5新增特性之ViewModel和DataBinding
本文地址:http://blog.csdn.net/sushengmiyan/article/details/38612721 本文作者:sushengmiyan ------------------ ...
- [struts2学习笔记] 第五节 编写struts2的action代码
本文地址:http://blog.csdn.net/sushengmiyan/article/details/40479299 官方文档: http://struts.apache.org/relea ...
- [ExtJS5学习笔记]第二十一节 Extjs5中使用config配置给ext.widget或者create方法传递参数
本文地址:http://blog.csdn.net/sushengmiyan/article/details/39252805 官方例子:http://docs.sencha.com/extjs/5. ...
- [ExtJS5学习笔记]第二十节 Extjs5配合数组的push方法,动态创建并加载组件
本文地址:http://blog.csdn.net/sushengmiyan/article/details/39226773 官方例子:http://docs.sencha.com/extjs/5. ...
- [ExtJS5学习笔记]第十一节 Extjs5MVVM模式下系统登录实例
本文地址:http://blog.csdn.net/sushengmiyan/article/details/38815923 实例代码下载地址: http://download.csdn.net/d ...
- [ExtJS5学习笔记]第六节 Extjs的类系统Class System命名规则及定义和调试
本文地址: http://blog.csdn.net/sushengmiyan/article/details/38479079 本文作者:sushengmiyan ----------------- ...
随机推荐
- UVALive - 3027:Corporative Network
加权并查集 #include<cstdio> #include<cstdlib> #include<algorithm> #include<cstring&g ...
- POJ 3261 可重叠k次最长重复子串
Milk Patterns Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 13127 Accepted: 5842 Ca ...
- hdu 4747 线段树
Mex Time Limit: 15000/5000 MS (Java/Others) Memory Limit: 65535/65535 K (Java/Others)Total Submis ...
- QCA4028软件平台启用双WAN指导
1 为何要启用双WAN QCA4028的硬件方案,基板上部署了一个LTE模块插槽,同时又外留了一个USB3.0接口,因此,就可以在此硬件平台上调试基于LTE的双WAN,预期实现: A 链路备份,在任意 ...
- VGG网路结构
VGG网络的基本结构 如图所示,从A到E网络的深度是逐渐增加的,在A中有11个权重层(8个卷积层,3个全连接层),在E中有19个权重层(16个卷积层,3个全连接层),卷积层的宽度是十分小的,开始时在第 ...
- sb error
width: $("#StudentManagement").parent().width(), height: $("#StudentManagement") ...
- Linux shell查询ip归属地
起因 有的时候写脚本需要能够在脚本中获取到ip的归属地,比如分析登录日志列出攻击者的相关信息等. 可以使用whois来查询ip的详细信息,但是whois并不是每台机器预装的,而且我想看中文的结果,所以 ...
- Rails里rake db:migrate出现undefined method last_comment问题的解决
这个问题和特定的rake版本有关,因为Rails要使用rake的last_comment方法在较新版本的rake中已被废弃,所以很多人卸载了新版本的rake去安装旧版本的rake. 这样也能解决问题, ...
- Lucene查询结果高亮
检索结果高亮 实现效果: 核心代码 package ucas.ir.lucene; import java.io.File; import java.io.IOException; import ja ...
- 复杂和遗留的数据库schema
本文作者:苏生米沿 本文地址:http://blog.csdn.net/sushengmiyan/article/details/50414652 In this chapter, we focus ...