本文地址: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应用增加字体图标的更多相关文章

  1. [ExtJS5学习笔记]第五节 使用fontawesome给你的extjs5应用添加字体图标

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/38458411本文作者:sushengmiyan-------------------- ...

  2. [ExtJS5学习笔记]第四节 欢迎来到extjs5-手把手教你实现你的第一个应用

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/38331347 本文作者:sushengmiyan ------------------ ...

  3. [ExtJS5学习笔记]第十七节 Extjs5的panel组件增加accodion成为折叠导航栏

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/39102335 官方例子:http://dev.sencha.com/ext/5.0.1 ...

  4. [ExtJS5学习笔记]第十节 Extjs5新增特性之ViewModel和DataBinding

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/38612721 本文作者:sushengmiyan ------------------ ...

  5. [struts2学习笔记] 第五节 编写struts2的action代码

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/40479299 官方文档: http://struts.apache.org/relea ...

  6. [ExtJS5学习笔记]第二十一节 Extjs5中使用config配置给ext.widget或者create方法传递参数

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/39252805 官方例子:http://docs.sencha.com/extjs/5. ...

  7. [ExtJS5学习笔记]第二十节 Extjs5配合数组的push方法,动态创建并加载组件

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/39226773 官方例子:http://docs.sencha.com/extjs/5. ...

  8. [ExtJS5学习笔记]第十一节 Extjs5MVVM模式下系统登录实例

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/38815923 实例代码下载地址: http://download.csdn.net/d ...

  9. [ExtJS5学习笔记]第六节 Extjs的类系统Class System命名规则及定义和调试

    本文地址: http://blog.csdn.net/sushengmiyan/article/details/38479079 本文作者:sushengmiyan ----------------- ...

随机推荐

  1. 51 nod 1427 文明 (并查集 + 树的直径)

    1427 文明 题目来源: CodeForces 基准时间限制:1.5 秒 空间限制:131072 KB 分值: 160 难度:6级算法题   安德鲁在玩一个叫“文明”的游戏.大妈正在帮助他. 这个游 ...

  2. 【USACO】股票市场

    题目描述 尽管奶牛天生谨慎,它们仍然在住房抵押信贷市场中大受打击,现在它们准备在股市上碰碰运 气.贝西有内部消息,她知道 S 只股票在今后 D 天内的价格. 假设在一开始,她筹集了 M 元钱,那么她该 ...

  3. ●POJ 3974 Palindrome(Manacher)

    题链: http://poj.org/problem?id=3974 题解: Manacher 求最长回文串长度. 终于会了传说中的马拉车,激动.推荐一个很棒的博客:https://www.61mon ...

  4. [POJ]1279: Art Gallery

    题目大意:有一个N边形展馆,问展馆内有多少地方可以看到所有墙壁.(N<=1500) 思路:模板题,半平面交求出多边形的核后计算核的面积. #include<cstdio> #incl ...

  5. poj 1279 半平面交核面积

    Art Gallery Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 6668   Accepted: 2725 Descr ...

  6. 【QAQ的Minecraft】

    树套树被QAQ用木斧挖了,只剩二维RMQ了. 题目:      QAQ最近爱上了一款很平凡的游戏,叫做<Minecraft>.目前游戏更新到了1.12版本,他发现了一条新的指令:/fill ...

  7. hihocoder1258(水)(2015ACM/ICPC北京站)

    题意: 给你B,C,S三种模式,当出现S时直接得分最多300(即perfect) 当是B,C时后面会跟一个数字,当后面的数字是从1开始的连续时,直接得分最多300(即perfect) 问给你一系列,最 ...

  8. 好久没用IJ写Java 之 《求输入的一个数中包含奇数、偶数、零的个数》

    /** *Created by xuzili at 22:12 on 2018/4/4 */ // 以上注释使用了IntelliJ Idea的File-Settings-Editor-Live Tem ...

  9. 文件服务器的详细配置之共享权限与NTFS权限的设置

       文件服务器的详细配置之共享权限与NTFS权限的设置    在大中型企业中,一般而言所谓文件服务器是指共享文件夹,即对共享权限与NTFS权限的设置!当然这也是我们搞网络者必须会的,是必经之路!我旨 ...

  10. 如何成为快手尬舞王?HUAWEI HiAI了解一下!

    左手!右手!抱一抱!扭一扭! 快手短视频,红遍东西南北中, 给大家的生活增添了不少乐趣. 有了人体姿态识别的魔法表情, 不会跳舞的也都可以跟着跳一跳. 从村口朴实的阿姨,到写字楼里端庄的白领, 在人体 ...