[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处理


相关文章
|
Web App开发 前端开发 安全
CSS学习完整篇
CSS 的主要使用场景就是美化网页,布局页面。 (1)HTML的局限性 他只关注内容的语义。 比如 <h1> 表明这是一个大标题,<p> 表明这是一个段落,<img> 表明这儿有一个图片,<a> 表示此处有链接。 HTML 可以做简单的样式,但是很臃肿和繁琐…… (2)CSS美化网页 CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称. 有时我们也会称之为 CSS 样式表或级联样式表。 CSS 是也是一种标记语言,主要用于设置 HTML 页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样
361 0
CSS学习完整篇
|
前端开发 JavaScript
jQuery入门第九章(CSS 定位)
jQuery入门第九章(CSS 定位)
72 0
jQuery入门第九章(CSS 定位)
|
前端开发
我用纯CSS实现了优惠券剪卡风格,UI小姐姐说....
在做商城类项目的时候,我们可能都会经历过“优惠券”这类需求,笔者在过往工作中,都是直接要求UI切图来实现,直到有一天产品告诉我一个奇思妙想:这个优惠券的宽度会随内容变化的!一下子让我陷入了人生的大思考,这样图片方式可不好整呐,因此萌生一个想法:能不能用纯css实现这些效果呢?
我用纯CSS实现了优惠券剪卡风格,UI小姐姐说....
|
前端开发 容器
web前端学习(二十八)——CSS3下拉菜单的相关设置
web前端学习(二十八)——CSS3下拉菜单的相关设置
web前端学习(二十八)——CSS3下拉菜单的相关设置
|
JavaScript 前端开发 容器
如何用 CSS 和原生 JS 创作一组 tooltip 提示框
效果预览 在线演示 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/rqyoYY 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
1599 0
|
前端开发
CSS3一个酷炫的加载效果
上效果图,用截屏工具制作的,看起来有点卡,在网页上面显示还是不错的。 CSS代码: .loader{ position: absolute; width: 2.
978 0