当前位置: 首页 > 编程日记 > 正文

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

本文地址: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处理


相关文章:

正则式高人谈解答正则式的心得

条件1&#xff1a; 长度为14个字符 条件2&#xff1a; 其中任意9个位置为数字&#xff0c;并且数字只能是(0,1,3) 条件3&#xff1a; 其余的位置全部为"-"符号 ------------------------------------------ 求一个正则表达式 答案为&#xff1a;^(?!(.*?-){6,})(?…

数据结构与算法--线性表(顺序表)

本图文主要掌握以下问题&#xff1a; 1. 什么是线性表&#xff0c;线性表有哪些操作&#xff1f; 2. 如何利用顺序结构实现线性表&#xff1f;

Myeclipse在启动tomcat的时候的模式改变

在Myeclipse中&#xff0c; windows->preferences->Myeclipse->Servers->Tomcat 然后找到你的相应的Tomcat服务器的版本 当选择Debug mode的时候&#xff0c;当启动tomcat的时候&#xff0c;会进入debug视图 当选择Run mode的时候&#xff0c;启动tomcat的时候&a…

Request.ServerVariables参数集

Request.ServerVariables("Url") 返回服务器地址 Request.ServerVariables("Path_Info") 客户端提供的路径信息 Request.ServerVariables("Appl_Physical_Path") 与应用程序元数据库路径相应的物理路径 Request.ServerVariables("Path_T…

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…

利用链式存储结构实现线性表

本图文主要介绍了如何利用链式存储结构实现线性表。

自己用的快捷键

win7中 1. Ctrl Shift N —— 创建一个新的文件夹你需要在文件夹窗口中按 Ctrl Shift N 才行&#xff0c;在 Chrome 中是打开隐身窗口的快捷键。2.Win 上/下/左/右 —— 移动当前激活窗口其中&#xff0c;Win 左/右 为移动窗口到屏幕两边&#xff0c;占半屏&#xff0c;Wi…

3月到9月之9月到12月

看看自己这个博客&#xff0c;偶然发现上次的到现在又是半年过去了&#xff0c;这中间发生的太多&#xff0c;可能我天生不爱写东西&#xff0c;呵半年留一次脚印&#xff0c;真不知道我的博客对于博客园来讲算不算资源浪费&#xff01;常看别人的&#xff0c;但自己没写过&…

Java动态代理机制

在Java的动态代理机制中&#xff0c;有两个重要的类。一个是InvocationHandler&#xff0c;另一个是Proxy。InvocationHandler&#xff1a;每一个动态代理类都必须要实现InvocationHandler接口&#xff0c;并且每个代理类的实例都关联到了一个handler&#xff0c;当我们通过代理…

Matlab与线性代数 -- 魔方矩阵

本图文主要介绍了如何利用Matlab实现魔方矩阵。

springMVC 返回类型选择 以及 SpringMVC中model,modelMap.request,session取值顺序

spring mvc处理方法支持如下的返回方式&#xff1a;ModelAndView, Model, ModelMap, Map,View, String, void。下面将对具体的一一进行说明&#xff1a; ModelAndView Java代码 RequestMapping("/show1") public ModelAndView show1(HttpServletRequest request, …

[文摘20070930]人际关系,你有五十五招

第1招 认清人生的意义以及毕生所全力以赴的目标 为什么要这么拼命&#xff1f;因为你必须对得起自己的良知。 想要成为一个人际关系高手&#xff0c;第一步就必须先确认你的价值观&#xff1b;若是你连这个都摸不清楚&#xff0c;就很难去看透人生的意义&#xff0c;更不用说…

数据库抽取,生成CSV文件导出,CSVUtils工具类

2019独角兽企业重金招聘Python工程师标准>>> 开发背景&#xff1a; 最近一直在忙一个任务调度系统&#xff0c;需求一直没定下来&#xff0c;需求一直变更&#xff0c;调度一直改&#xff0c;往往复复。。。 等这波忙完了可以写一下关于BI这边调度任务的相关问题&am…

Matlab与线性代数 -- Pascal矩阵

本文主要介绍利用Matlab实现pascal矩阵的相关知识。

java加密算法

java加密算法 本篇内容简要介绍BASE64、MD5、SHA、HMAC几种加密算法。 BASE64编码算法不算是真正的加密算法。 MD5、SHA、HMAC这三种加密算法&#xff0c;可谓是非可逆加密&#xff0c;就是不可解密的加密方法&#xff0c;我们称之为单向加密算法。我们通常只把他们作为加密的基…

在多台FMS服务器之间共享流

FMS有一个非常重要的功能,那就是可以在多台服务器之间共享流. 利用这一功能,我们可以把源服务器上的流分发到其它的服务器,这些获得流的服务器同样可以作为新的源服务器使用.这个功能有点象FMS集群. 我们都知道,利用WMP插件可以获取网上的流媒体地址制作网络电视台,其实利用Fla…

linux实现nat转发和内部端口映射

路由机 eth0:114.114.114.114(公网ip) eth1:192.168.1.1(内网ip) pc1 eth0:192.168.1.2(内网ip) eth1(拨号ip) pc2 eth0:192.168.1.3(内网ip) eth1(拨号ip) 1.配置路由机网卡信息 vim /etc/sysconfig/network-scripts/ifcfg-eth1 TYPEEthernet BOOTPROTOstati…

15级团队学习成果汇报 -- 利用C#语言实现展览厅

本图文主要是15级团队学习成果的汇报“ 利用C#语言实现展览厅”。

我所理解的Spring AOP的基本概念

Spring AOP中的概念晦涩难懂&#xff0c;读官方文档更是像读天书&#xff0c;看了很多例子后&#xff0c;写一些自己理解的一些spring的概念。要理解面向切面编程&#xff0c;要首先理解代理模式和动态代理模式。 假设一个OA系统中的一个功能是查看考勤信息&#xff0c;那么我…

你需要的大概不是 enumerated

作者&#xff1a;KHANLOU&#xff0c;原文链接&#xff0c;原文日期&#xff1a;2017-03-28译者&#xff1a;四娘&#xff1b;校对&#xff1a;Cwift&#xff1b;定稿&#xff1a;CMBSwift 标准库里最容易被滥用的就是 Sequence 的 enumerated() 函数。这个函数会返回一个新的序…

Matlab与线性代数 -- 正态分布的随机矩阵

本图文介绍了如何利用Matlab实现正态分布的随机矩阵。

修改maven本地仓库的位置及疑惑

maven的默认仓库在~/.m2/repository下&#xff0c;这个是在c盘下&#xff0c;很多系统程序都在c盘&#xff0c;而且c盘的空间有时候不够大&#xff0c;所以经常要修改本地repository的位置&#xff0c;我做的修改如下&#xff1a; 在D盘建立一个repository&#xff1a;D:\mave…

值得FS去的英雄副本

1) 奥金尼地穴腰带 18耐23智19精 22法爆28法伤2) 塞泰克大厅法杖 40耐42智 37法爆168法伤3) 暗影迷宫腰带 31耐27智 17法爆34法伤4) 奴隶围栏饰品 37法伤一定几率使施法加速320,持续6秒5) 盘牙洞穴魔杖 10智 11法爆20法伤转载于:https://www.cnblogs.com/Evanescence/archive/2…

利用C#语言实现小闹钟

本图文主要是15级团队学习成果的汇报“ 利用C#语言实现小闹钟”。

Windows和linux双系统——改动默认启动顺序

电脑上装了Windows 7和Ubantu双系统&#xff0c;因为Linux系统用的次数比較少而且还是默认的启动项对此非常不能容忍&#xff0c;因此得改动Windows为默认的启动项。 因为电脑上的系统引导程序是GRUB&#xff0c;因此改动当然也就落到Linux系统上啦。改动/boot/grub/grub.cfg该…

ThreadLocal的使用方法

ThreadLocal的含义是Thread Local Variable&#xff0c;它可以声明一个字段&#xff0c;使得不同的线程访问这个字段时&#xff0c;获取的都是不同的副本&#xff0c;互不影响。 ThreadLocal的作用和在每个Thread类声明一个字段相同&#xff0c;那么什么时候使用它呢&#xff1…

如何实现对象交互

在本篇随笔中&#xff0c;我们学习下什么是对象选择&#xff0c;投影和反投影是如何工作的&#xff0c;怎样使用Three.js构建可使用鼠标和对象交互的应用。例如当鼠标移到对象&#xff0c;对象变成红色&#xff0c;鼠标移走&#xff0c;对象又恢复原来的颜色。 本篇随笔的源代码…

Matlab与线性代数 -- 矩阵的大小

本图文介绍了如何利用Matlab求矩阵的大小。

最近做了一个小小的系统,收获挺大的....我想总结一下

首先我要感谢老许,是他给了我这次机会.以后我会把我的经验一点一点总结出来....为那些在编程之路上的迷茫者找到方向活着让人兴奋...总觉的应该去做点什么做工程开发吧----我的老师阿温说过一句话让我记忆尤新:"坚持成就传奇".我想用他去勉力每一个在人生路上奋斗的人…

Hibernate和iBATIS 优缺点比较

选择Hibernate还是iBATIS都有它的道理&#xff1a;Hibernate的特点&#xff1a;Hibernate功能强大&#xff0c;数据库无关性好&#xff0c;O/R映射能力强&#xff0c;如果你对Hibernate相当精通&#xff0c;而且对Hibernate进行了适当的封装&#xff0c;那么你的项目整个持久层…