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

news/2024/7/3 7:32:17

本文地址:http://blog.csdn.net/sushengmiyan/article/details/38458411
本文作者:sushengmiyan
-------------------------------------------------资源链接--------------------------------------------------------
FontAwesome glyph编码:http://fortawesome.github.io/Font-Awesome/cheatsheet/

使用图标美化button: 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 自己主动构造出来的程序,button就是一个普通的button。面板也是普通的面板,假设我想对button添加一个图标,是不是会更好看呢?本节介绍一种简单的给ext js程序添加fontawesome提供的图标的方法。


Font Awesome简单介绍

--------------------------

Font Awesome是一款非常流行的字体图标工具。随着Bootstrap的流行而逐渐被人所认识,如今FontAwesome不只能够在bt上使用。还能够应用在各种web前端开发中。相对于传统的使用背景图片作为图标,字体图标主要是支持自适应、能够使用字体的各种特性(比方变色、变大变小、字体阴影等)、降低数据载入、样式更easy定义等。

官网:http://fortawesome.github.io/Font-Awesome/

最新版本号:4.1


在Ext js中使用 Font Awesome

----------------------------------------

在Ext中使用Font Awesome 非常easy。首先我们须要下载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.给button等添加图标

好。准备工作完毕,如今就将好看的图标添加进程序,先跟我一起改动app\view\main文件夹下的Main.js文件

用editPlus打开。大约是在32行和33行。

我们将button的值改成了保存。然后添加了一个glyph属性。这种话执行效果例如以下:

5.疑惑解释

对于button和面板等来说,都存在glyph这个属性,我们能够通过这个属性给button等加好看的图标。

后面跟着的是一串字符码,这个字符码我们怎样获取呢?

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



http://lihuaxi.xjx100.cn/news/240870.html

相关文章

Equifax再陷风波:一门户网站管理员密码是admin/admin

据外媒报道&#xff0c;又一个Equifax门户网站被指存在安全协议问题。最先发现这个的Hold Security LLC指出&#xff0c;一个负责管理信用报告纠纷&#xff08;内含个人信息&#xff09;的新Equifax门户网站使用的是用户名和密码都为admin的用户名/密码数字通道。该门户网站叫V…

1085 Perfect Sequence

明确题目的核心是要找到 找到第一个满足 M > m*p 的M的下标。然后用该下标减去起点的下标即为序列元素个数。 二分区间应当是M所有可能的取值范围。起点是i1&#xff0c;终点是N而不是N-1&#xff0c;虽然A[N]上无元素。注意啊&#xff0c;原题要找的M是小于等于m*p的&…

Linux (x86) Exploit 开发系列教程之十一 Off-By-One 漏洞(基于堆)

Off-By-One 漏洞&#xff08;基于堆&#xff09; 译者&#xff1a;飞龙 原文&#xff1a;Off-By-One Vulnerability (Heap Based) 预备条件&#xff1a; Off-By-One 漏洞&#xff08;基于栈&#xff09;理解 glibc mallocVM 配置&#xff1a;Fedora 20&#xff08;x86&#xff…

【Appium】Appium+Python环境搭建

环境准备&#xff1a; 1.jdk 2.android-sdk 3.python 4.Node.js 5.appium 6.Appium-Python-Client 1. 下载jdk1.7&#xff1a;http://www.oracle.com/technetwork/java/javase/downloads/java-archive-downloads-javase7-521261.html 1&#xff09;如果系统中存在其他版本…

PAT(甲级)2021年秋季考试summary

91 分 排名大概是1/3的段位 第一题是定义了一个特殊的数据结构&#xff0c;我用二分法做&#xff0c;样例通过了&#xff0c;但是得分11/20&#xff0c;测试用例只过了前两个&#xff0c;死活通不过其他的。问题出在declare这个词上&#xff0c;最后不是问输出了多少数组&…

计算机会议排名等级

http://blog.sina.com.cn/s/blog_9c411c310102vs2g.html 附件是计算机领域的学术会议等级排名情况&#xff0c;分为A, A, B, C, L 共5个档次。其中A属于顶级会议&#xff0c;基本是这个领域全世界大牛们参与和关注最多的会议。国内的研究者能在其中发表论文的话&#xff0c;是很…

可能是 nginx 限速最容易理解的说明

nginx 限速研究汇报 写在前面 这两天服务器带宽爆了&#xff0c;情况如下图&#xff1a; 出于降低带宽峰值的原因&#xff0c;我开始各种疯狂的研究nginx限速。下面是我研究过程中的心得&#xff01;&#xff08;花了好几个小时的时间写的人生第一篇技术类网文&#xff09; 限速…

二分法典例:木棒切割问题

Input : 输入木棒根数n&#xff0c;要得到的等长木棒数量K&#xff0c;以及n根木棒的长度。 Output : 等长木棒的最大长度。 用二分法求解这道题&#xff0c;首先要找到以得到的等长木棒数量为因变量、等长木棒长度为自变量函数。 int getK(int l){//随着l增大&#xff0c;返…