标签:style blog http color 使用 io strong 文件
本文地址:
本文作者: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是一款很流行的字体图标工具。随着Bootstrap的流行而逐渐被人所认识,现在FontAwesome不仅仅可以在bt上使用,还可以应用在各种web前端开发中。相对于传统的使用背景图片作为图标,字体图标主要是支持自适应、可以使用字体的各种特性(比如变色、变大变小、字体阴影等)、减少数据加载、样式更容易定义等。
官网:http://fortawesome.github.io/Font-Awesome/
最新版本:4.1
----------------------------------------
在Ext中使用Font Awesome 非常简单,首先我们需要下载Font Awesome压缩包
下载地址:http://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.1.0.zip
点击下载,或者进入官网下载最新版本即可。
下载之后,我们可以看到font-awesome-4.1.0.zip这样的zip压缩包,解压缩,可以看到有如下目录:
我们只需要其中的css目录和fonts目录即可。
解压到应用程序目录,即有.sencha文件夹的这个目录,我解压之后如下:
打开项目中的index.html文件,加入如下代码:
<link type="text/css" rel=" stylesheet" href="css/font-awesome.css"">
好,准备工作完成,现在就将好看的图标增加进程序,先跟我一起修改app\view\main文件夹下的Main.js文件
用editPlus打开,大约是在32行和33行。
我们将button的值改成了保存,然后增加了一个glyph属性,这样的话运行效果如下:
对于button和面板等来说,都存在glyph这个属性,我们可以通过这个属性给按钮等加好看的图标。
后面跟着的是一串字符码,这个字符码我们如何获取呢?
对于每一个版本都有对于的cheatsheet页面,我们到这里面找我们喜欢的图标,然后比对后面的字码即可。
Every Font Awesome 4.1.0 Icon, CSS Class, & Unicode :http://fortawesome.github.io/Font-Awesome/cheatsheet/
[ExtJS学习笔记]第五节 使用fontawesome给你的web应用增加友好图标,布布扣,bubuko.com
[ExtJS学习笔记]第五节 使用fontawesome给你的web应用增加友好图标
标签:style blog http color 使用 io strong 文件
原文地址:http://blog.csdn.net/sushengmiyan/article/details/38458411