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

本文地址：[http://blog.csdn.net/sushengmiyan/article/details/38458411](http://blog.csdn.net/sushengmiyan/article/details/38458411) 本文作者：sushengmiyan -------------------------------------------------资源链接-------------------------------------------------------- FontAwesome glyph编码：[http://fortawesome.github.io/Font-Awesome/cheatsheet/](http://fortawesome.github.io/Font-Awesome/cheatsheet/) 使用图标美化按钮: [http://blog.csdn.net/jfok/article/details/35994081](http://blog.csdn.net/jfok/article/details/35994081) use font awesome Icons in Ext js : [http://extjs.eu/using-font-icons-in-ext-fontawesome/](http://extjs.eu/using-font-icons-in-ext-fontawesome/) -------------------------------------------------------------------------------------------------------------------- ### **前期准备：** ------------- 1.了解sencha cmd 2.了解Ext JS 5 即可以完成[ http://blog.csdn.net/sushengmiyan/article/details/38313537](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/](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](http://fontawesome.io/assets/font-awesome-4.2.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/](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/](http://fortawesome.github.io/Font-Awesome/cheatsheet/) ### 另一种简化实现： 如果说，每次都键入'xf0c7@FontAwesome'后缀@FontAwesome比较繁琐，那么你可以在程序加载的时候指定字体格式。 如在Mian.js中的initComponent函数值中增加Ext.setGlyphFontFamily('FontAwesome');那么后期使用的时候就可以不加后缀啦。 但是需要注意的是，这样操作之后，就不可以使字符串形式了，需要是数字形式了。如：  设置全局字体文件  简化之后的glyph处理