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

本文作者: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处理

时间: 2024-10-29 04:28:16

[ExtJS5学习笔记]第五节 使用fontawesome给你的extjs5应用增加字体图标的相关文章

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

本文作者:sushengmiyan ------------------------------------------------------------------------------------------------------------------- 翻译来源:http://docs.sencha.com/extjs/5.0.0/getting_started/welcome_to_extjs.html --------------------------------------

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

官方例子: http://dev.sencha.com/ext/5.0.1/examples/window/layout.html?theme=neptune 本文作者:sushengmiyan ------------------------------------------------------------------------------------------------------------------------------------ 做一个系统的话,一般都需要有导航栏啊,

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

本文作者:sushengmiyan -------------------------------------------------------------资源链接----------------------------------------------------------------------- 翻译来源:http://docs.sencha.com/extjs/5.0/application_architecture/view_models_data_binding.html AP

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

实例代码下载地址: http://download.csdn.net/detail/sushengmiyan/7817549 本文作者:sushengmiyan ------------------------------------------------------------------------------------------------------------------------------------ 暂时完成效果图如下: 1.登录界面 输入任意用户名与密码(暂时没有设置登

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

官方例子: http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.Class-cfg-config 本文作者:sushengmiyan ------------------------------------------------------------------------------------------------------------------------------------ 对于Extjs5的使用方式,我习惯性的是,先使用

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

本文作者:sushengmiyan -------------------------------------------------------------资源链接----------------------------------------------------------------------- 翻译来源  Sencha Cmd官方网站:    http://www.sencha.com/products/extjs/up-and-running/the-class-system -

[ExtJS5学习笔记]第七节 Extjs5的组件components及其模板事件方法学习

本文作者:sushengmiyan -------------------------------------------------------------资源链接----------------------------------------------------------------------- 翻译来源  Sencha Cmd官方网站:  http://www.sencha.com/products/extjs/up-and-running/concepts-components/

kvm虚拟化学习笔记(十五)之kvm虚拟机动态迁移

原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://koumm.blog.51cto.com/703525/1300783 相比KVM虚拟机静态迁移中需要拷贝虚拟机虚拟磁盘文件,kvm虚拟机动态迁移无需拷贝虚拟磁盘文件,但是需要迁移到的虚拟主机之间需要有相同的目录结构虚拟机磁盘文件,本文这部分内容通过nfs来实现,当然也可以采用GFS2集群文件系统来实现,本文的动态迁移是基于共享存储动态迁移. KVM动态迁移目前有两种,一种是基于

VSTO学习笔记(五)批量编辑Excel 2010 x64

原文:VSTO学习笔记(五)批量编辑Excel 2010 x64 近期因为工作的需要,经常要批量处理大量的Excel文件,如果纯手工一个个修改,非常的麻烦,于是写了这么一个帮助类,希望能对你有所帮助.里面很多方法可以进一步推广,增减适当的参数,部分方法用到了C# 4.0新特性,如果需要调试,请安装Visual Studio 2010. 示例代码下载 本系列所有示例代码均在 Visual Studio 2010 Ultimate RC + Office 2010 Professional Plus