ExtJs5_使用图标字体来美化按钮
sencha 的例子中，有使用图标字体来美化按钮的例子，这个用起来又方便风格又统一，例如下图：
上面图标字体的使用方法也很简单，只要下载Font Awesome的css和图标文件，放到项目里就可以了。部分图标截图：
Font Awesome的网站为：点击打开链接。进入网站后，先下载Font Awesome 3.0,解压缩后，将css和font目录拷贝到war目录下。
(Font Awesome最新版本为4.0,网址为：http://fontawesome.io/ )
文件拷贝进来以后，需要在index.html中引入css文件。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"> <title>app</title> <!-- 引入Font Awesome的css文件 -->
<link type="text/css" rel="stylesheet" href="css/font-awesome.css"> <!-- The line below must be kept intact for Sencha Cmd to build your application -->
<script id="microloader" type="text/javascript" src="bootstrap.js"></script> </head>
<body></body>
</html>
至此准备工作结束，可以字体文件可以使用了。对于一个Button来说，在其文字前面放一个图标可以使用属性icon,iconCls,对于图标字体来说，可以使用iconCls属性，也可以使用glyph这个属性。我们先来看一段该css之中的设置：
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */
.icon-glass:before {
content: "\f000";
}
.icon-music:before {
content: "\f001";
}
.icon-search:before {
content: "\f002";
}
.icon-envelope-alt:before {
content: "\f003";
}
从其css的描述中可以看出，其命名中就表示了该图标的名称，比如说icon-search是一个搜索的图标，在Button使用的时候,可以这样加入属性：
{
text : '搜索',
iconCls : 'icon-search'
},
{
text : '设置',
glyph : 0xf0c9
}
这二种方式加入的icon会有不同之处：
可以看出来用glyph设置的更好一些。为了找到这个数字，你先要去Font Awesome 网站上找到你需要的图标，记下名称，然后打开 css 目录下的 font-awesome.css,从中找到该名称的.class值，然后记下content的值。现在我们对top和bottom中的相应按钮加入图标字体。
Ext.define('app.view.main.region.Top', {
extend : 'Ext.toolbar.Toolbar',
alias : 'widget.maintop', // 定义了这个组件的xtype类型为maintop
items : [{
xtype : 'image',
bind : { // 数据绑定到MainModel中data的system.iconUrl
hidden : '{!system.iconUrl}', // 如果system.iconUrl未设置，则此image不显示
src : '{system.iconUrl}' // 根据system.iconUrl的设置来加载图片
}
}, {
xtype : 'label',
bind : {
text : '{system.name}' // text值绑定到system.name
},
style : 'font-size : 20px; color : blue;'
}, {
xtype : 'label',
bind : {
text : '{system.version}'
}
}, '->', {
text : '菜单',
glyph : 0xf0c9,
menu : [{
text : '工程管理',
menu : [{
text : '工程项目'
}, {
text : '工程标段'
}]
}]
}, ' ', ' ', {
text : '主页',
glyph : 0xf015
}, {
text : '帮助',
glyph : 0xf059
}, {
text : '关于',
glyph : 0xf06a
}, {
text : '注销',
glyph : 0xf011
}, '->', '->', {
text : '搜索',
glyph : 0xf002
}, {
text : '设置',
glyph : 0xf013
}]
});
Ext.define('app.view.main.region.Bottom', {
extend : 'Ext.toolbar.Toolbar',
alias : 'widget.mainbottom',
items : [{
bind : {
text : '使用单位:{user.company}'
},
glyph : 0xf0f7
}, {
bind : {
text : '用户:{user.name}'
},
glyph : 0xf007
}, '->', {
bind : {
text : '{service.company}'
},
glyph : 0xf059
}, {
bind : {
text : '{service.name}'
}
}, {
bind : {
text : '{service.phonenumber}'
},
glyph : 0xf095
}, {
bind : {
hidden : '{!service.email}', // 绑定值前面加！表示取反，如果有email则不隐藏，如果email未设置，则隐藏
text : 'eMail:{service.email}'
},
glyph : 0xf003
}, {
bind : {
text : '©{service.copyright}'
}
}]
});
在修改了上面的glyph之后，还不能正确的显示图标，必须指定一下字体才行。修改Main.js,在里面加入初始化函数。
initComponent : function() {
Ext.setGlyphFontFamily('FontAwesome'); // 设置图标字体文件，只有设置了以后才能用glyph属性
this.callParent();
},
经过以上的操作，图标字体就可以正常显示了。具体效果如下：
细节决定成败，虽然加了图标字体的按钮比较好看，但是最好把外框和背景去掉，只有鼠标移上去的时候才显示。下一节我们继续Button创建一个自定义的Button,让他的背景是透明的。
ExtJs5_使用图标字体来美化按钮的更多相关文章
- 5、手把手教你Extjs5(五)使用图标字体来美化按钮)
sencha 的例子中,有使用图标字体来美化按钮的例子,这个用起来又方便风格又统一,例如下图: 上面图标字体的使用方法也很简单,只要下载Font Awesome的css和图标文件,放到项目里就可以了. ...
- Extjs 使用图标字体来美化按钮)
1. 使用Font Awesome,下载地址http://www.bootcss.com/p/font-awesome/#icons-new 2. 把font和css目录放到 Ext的app目录下面 ...
- extjs基础 使用图标字体来美化按钮)
下载 Font Awesome 1.拷贝css 和 fonts 到build同级目录 2.需要在index.html中引入css文件 3.在main.js文件中添加 initComponent : f ...
- 图标字体的使用(fontello.com)字体推荐及使用技巧
网页设计中为了页面漂亮好看,图标是少不了,网页中使用的图标通常都是使用图片,使用图片图标的有很多弊端,如果你经常制作网页应该有一肚子埋怨. 使用图片图标的弊端 放大图标必须重新作图, 改变颜色必须开启 ...
- iocfont 网页图标字体以及使用方法
在网页设计中使用图标字体(icon font)是件挺有新意的事情,使用图标字体能我们带来了一定的方便,比如在移动设备.Retina屏幕效果展示.兼容IE6/7浏览器以及能任意将图标放大缩小等,这些都是 ...
- CSS高级技巧 图标字体ICONFONT的使用方法视频
图标字体 iconfont 这是一种字体,它跟svg 有很大 相似点 它是矢量的,放大缩小不失真的.很且很小. 我们把它成字看来. 字体 在 从ie4就开始支持的. 兼容性很好 唯一麻烦的地方 ...
- (转载)app ico图标字体制作
图标字体化浅谈 在做手机端Web App项目中,经常会遇到小图标在手机上显示比较模糊的问题,经过实践发现了一种比较好的解决方案,图标字体化.在微社区项目中,有很多小的Icon(图标),如分享.回复 ...
- 第一次制作和使用图标字体-IcoMoon
开题:之前就有所耳闻,最近两天第一次运用到图标字体.刚开始嘛,一脸懵逼的状态.成功运用之后就来记录一下使用过程咯! 1. 打开在线生成工具:https://icomoon.io/app/#/selec ...
- 01_MUI之Boilerplate中：HTML5示例，动态组件，自定义字体示例，自定义字体示例，图标字体示例
1安装HBuilder5.0.0,安装后的界面截图如下: 2 按照https://www.muicss.com/docs/v1/css-js/boilerplate-html中的说明,创建上图的 ...
随机推荐
- React Native专题
转载注明出处:地址:http://www.lcode.org本文出自:[江清清的技术专栏]本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶 ...
- mysql 更新有外键约束的字段
给一个表的字段更新,发现 这个字段是外键,刚开始用了笨 的方法,取消外键,修改后,在添加, 网上百度了. 这样设置 先 关闭外键约束 SET FOREIGN_KEY_CHECKS=0; 执行完了 打开 ...
- VS 制作安装包小窥
难得忙里偷闲,看到有关VS制作安装包,按下文小试一把,还行,比不上Installshield. 首先在打开 VS2010 > 文件 >新建项目 创建一个安装项目 XXX 在“目 ...
- 【技术文档】《算法设计与分析导论》R.C.T.Lee等·第4章 分治策略
分治策略有一种“大事化小,小事化了”的境界,它的思想是将原问题分解成两个子问题,两个子问题的性质和原问题相同,因此这两个子问题可以再用分治策略求解,最终将两个子问题的解合并成原问题的解.有时,我们会有 ...
- Android三种实现自定义ProgressBar的方式介绍
一.通过动画实现 定义res/anim/loading.xml如下: View Row Code<?xml version="1.0" encoding="UTF- ...
- android下大文件分割上传
由于android自身的原因,对大文件(如影视频文件)的操作很容易造成OOM,即:Dalvik堆内存溢出,利用文件分割将大文件分割为小文件可以解决问题. 文件分割后分多次请求服务. //文件分割上传 ...
- 【待解决】编译V8引擎出错-snapshot.cc
这几天学习nodejs,翻阅官网的API文档.看到nodejs插件时,想了解一下v8的实现机制,于是我便从GitHub社区克隆了一份v8源码库.哪知道,编译安装的时候就出了问题,这问题已经折磨我两天了 ...
- 初学coreData数据库读取不成功的问题
写了一个从数据库读取数据显示列表的代码,结果却无法运行,提示找不到对应的entity,也就是数据库中的某一个表 我查遍了代码也没有发现什么逻辑错误,在appDelegate也初始化了相关数据库,在界面 ...
- Decorator Wrapper 装饰模式 包装
简介 装饰模式 装饰模式以对客户端[透明]的方式[扩展]对象的功能,客户端并不会觉得对象在装饰前和装饰后有什么不同,是继承关系的一个替代方案. 若只为增加功能而使用继承,当基类较多时会导致继承体系越来 ...
- 转载：C#中事件和委托的编译代码
接上文转载:C#中事件的由来,这时候,我们注释掉编译错误的行,然后重新进行编译,再借助Reflactor来对 event的声明语句做一探究,看看为什么会发生这样的错误: public event Gr ...