Extjs 使用图标字体来美化按钮)
1. 使用Font Awesome,下载地址http://www.bootcss.com/p/font-awesome/#icons-new
2. 把font和css目录放到 Ext的app目录下面
3. 在index.html中加载
<!-- 引入Font Awesome的css文件 -->
<link type="text/css" rel="stylesheet" href="css/font-awesome.css">
4. 在main.js中设置
initComponent : function() {
Ext.setGlyphFontFamily('FontAwesome'); // 设置图标字体文件,只有设置了以后才能用glyph属性
this.callParent();
}
5.使用
{
text : '搜索',
iconCls : 'icon-search' //这个按钮要到http://www.bootcss.com/p/font-awesome/#icons-new 这个网站去找相应的值
}, {
text : '设置',
glyph : 0xf0c9 // 这个是用 'icon-search' 到css目录下面的font-awesome.css中去找对应的字符串,记住content的值,在前面加入一个0x并把 \符号去掉就可以了
}
Extjs 使用图标字体来美化按钮)的更多相关文章
- ExtJs5_使用图标字体来美化按钮
sencha 的例子中,有使用图标字体来美化按钮的例子,这个用起来又方便风格又统一,例如下图: 上面图标字体的使用方法也很简单,只要下载Font Awesome的css和图标文件,放到项目里就可以了. ...
- 5、手把手教你Extjs5(五)使用图标字体来美化按钮)
sencha 的例子中,有使用图标字体来美化按钮的例子,这个用起来又方便风格又统一,例如下图: 上面图标字体的使用方法也很简单,只要下载Font Awesome的css和图标文件,放到项目里就可以了. ...
- 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中的说明,创建上图的 ...
随机推荐
- Nova: 虚机的块设备总结 [Nova Instance Block Device]
和物理机一样,虚拟机包括几个重要的部分:CPU.内存.磁盘设备.网络设备等.本文将简要总结虚机磁盘设备有关知识. 1. Nova boot CLI 中有关虚机块设备的几个参数 nova boot CL ...
- ios移动端切图及前端规范
移动端IOS知识普及:IOS标准分辨率:1242px * 2208px 切片要求: 1. 设计稿是按标准分辨率1242X2208设计,图片资源尺寸则是3倍图尺寸,将整个设计图压缩成750X133 ...
- CF687C. The Values You Can Make[背包DP]
C. The Values You Can Make time limit per test 2 seconds memory limit per test 256 megabytes input s ...
- POJ1270 Following Orders[拓扑排序所有方案 Kahn]
Following Orders Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 4885 Accepted: 1973 ...
- 创建简单的机器人模型smartcar
前面我们使用的是已有的机器人模型进行仿真,这一节我们将建立一个简单的智能车机器人 smartcar,为后面建立复杂机器人打下基础. 一.创建硬件描述包. cd ~/catkin_ws/srcroscr ...
- [No000047]好的架构源于不停地衍变,而非设计
对很多创业公司而言,随着业务增长,网站的流量也会经历不同的阶段.从十万流量到一百万流量,再从一百万流量跨越到一千万甚至上亿的流量,网站的架构需要经历哪些变化?在"OneAPM 技术公开课&q ...
- 一个简单的Android富文本TextView实现
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 24.0px Helvetica; color: #555555 } p.p2 { margin: 0.0p ...
- (转载)ORA-14452:试图创建,更改或删除正在使用的临时表中的索引
因为表kol_xx_fin050_temp 为临时表,而且有其他session正在使用. 处理步骤: 1.先从 dba_objects / user_objects中查询到该表的object_id: ...
- 关于MyBatis mapper的insert, update, delete返回值
这里做了比较清晰的解释: http://mybatis.github.io/mybatis-3/java-api.html SqlSession As mentioned above, the Sql ...
- WIN7下强制分第四个主分区的方法
通过磁盘管理的界面方式, 第四个分区会被分成扩展分区, 建议通过命令行 打开命令行运行diskpart, list disk 会列出所有磁盘, 选择要操作的磁盘序号如1,select disk 1 如 ...