[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处理
[ExtJS5学习笔记]第五节 使用fontawesome给你的extjs5应用添加字体图标相关推荐
- [ExtJS5学习笔记]第十一节 Extjs5MVVM模式下系统登录实例
本文地址:http://blog.csdn.net/sushengmiyan/article/details/38815923 实例代码下载地址: http://download.csdn.net/d ...
- [ExtJS5学习笔记]第十节 Extjs5新增特性之ViewModel和DataBinding
本文地址:http://blog.csdn.net/sushengmiyan/article/details/38612721 本文作者:sushengmiyan ------------------ ...
- 贝加莱学习笔记第五节
1.如何打开 test 窗口 2.要先点击左上窗口边 Homing,才能再右上窗口处显示出回零时偏移值的设置. 3.用编码器中的 R 信号回零,需要改两个蓝条的参数 4.虚轴的用法 比如有 3 个实轴 ...
- 《Go语言圣经》学习笔记 第五章函数
<Go语言圣经>学习笔记 第五章 函数 目录 函数声明 递归 多返回值 匿名函数 可变参数 Deferred函数 Panic异常 Recover捕获异常 注:学习<Go语言圣经> ...
- PyTorch学习笔记(五):模型定义、修改、保存
往期学习资料推荐: 1.Pytorch实战笔记_GoAI的博客-CSDN博客 2.Pytorch入门教程_GoAI的博客-CSDN博客 本系列目录: PyTorch学习笔记(一):PyTorch环境安 ...
- Django学习笔记(五)
Django学习笔记(五) MVC和MTV对比 传统的MVC(Model-View-Controller) M 模型层,主要是对数据库层的封装 V 视图层,向用户展示结果 C 控制层,用于请求,获取数 ...
- 郝健: Linux内存管理学习笔记-第6节课
前序文章: 郝健: Linux内存管理学习笔记-第1节课 郝健: Linux内存管理学习笔记-第2节课 郝健: Linux内存管理学习笔记-第3节课 郝健: Linux内存管理学习笔记-第4节课 郝健 ...
- Android学习笔记第五篇--网络连接与云服务(一)
Android学习笔记第五篇–网络连接与云服务 第一章.无线连接设备 除了能够在云端通讯,Android的无线API也允许在同一局域网内的设备通讯,**甚至没有连接网络,而是物理具体相近,也可以相 ...
- Java并发编程艺术学习笔记(五)
Java并发编程艺术学习笔记(五) Java并发容器和框架 Java为开发者也提供了许多开发容器和框架,可以从每节的原理分析来学习其中精妙的并发程序. 一.ConcurrentHashMap的实现原理 ...
最新文章
- RxJava debounce()和throttleWithTimeout()
- 获取Android studio 中的模拟器的界面的点的坐标(Ubuntu)
- keras画acc和loss曲线图
- 用python中django创建网页终端直接关闭是什么问题_如何用Python Django创建网站?系列文章03(持续更新...)...
- 电源pd功能的充电器_PD快充充电器电源芯片和普通充电器电源芯片有什么区别?...
- 大型网站架构利器-CDN技术
- tablueau地图标记圆形_高德地图实现自定义小蓝点 自定义点标记 绘制多边形/圆形区域 根据地图的移动显示或者隐藏自定义点标记的相关实现...
- 95-30-050-java.util.ArrayList:Vector
- 基于OpenCV实现人脸识别--Python
- java 中j= i_java中 i = i++和 j = i++ 的区别
- 为什么摩根大通「发币」标志着企业区块链应用元年?
- VR沙盘 日夜场景的制作(Unity2018)
- 金九银十,果然如此,这个九月有点折腾
- python 冒号分隔_以冒号分隔的分析
- 门户通专访蓝色理想曾沐阳:用户需慢慢沉淀
- 豆腐锅巴--怀念娭毑_原水_新浪博客
- Excel如何批量删除数字单元格前的撇号
- 第六部分 项目成本管理
- 计算机网络:16---因特网标准(IETF、RFC)
- STM32使用GSM模块发送中英文短信(TEXT模式到PDU模式的转换)
热门文章
- 选项选择Windows XP系统安装MySQL5.5.28图解
- C++各大有名库的介绍之C++标准库
- php常用比较函数区别表
- Linux+Apache2+openssl实现https验证
- C语言字符串处理的库函数
- 用C#编写获取远程IP,MAC的方法
- ASP.NET弹出窗口技术之增加网站流量方法
- 静态分析C语言生成函数调用关系的利器——cflow
- 网络文件系统(NFS)简介
- matlab怎么根据波宽度去波,使用Matlab图像处理(三)——图像滤波原理