在 ExtJS 中使用 Font Awesome
来源:互联网 发布:plc温度控制编程实例 编辑:程序博客网 时间:2024/05/01 21:53
Font Awesome 是目前最流行的图标方案之一,是一套优质的图标字体库以及 CSS 图标框架。相对于传统的图片作为图标,字体图标支持自适应调节大小、可以使用字体的一些特性调整风格(颜色、大小、字体阴影)、更小的文件体积。
下载Font Awesome
根据你或者项目的编程习惯,你可以通过以下几种方式获取最新版的 Font Awesome:
- 到 Font Awesome 项目主页, 点击 Download 按钮下载最新版本。
- 到 Font Awesome Github 主页, 下载最新版本或者 git clone 下来。
- 如果项目组有使用 bower 来管理第三方包,那么可以通过 bower install fontawesome 来获取 Font Awesome。
Font Awesome 的目录结构是这样,css 是 Font Awesome 提供的 CSS 类, fonts 内就是图标的字体文件,不同的格式是为了兼容不同的浏览器,并且新版本开始支持 SVG 的形式。less 和 scss 是用来管理 css 的。
在 ExtJS 项目中引入 Font Awesome
1. 首先依照项目的编程习惯以及规范,把 Font Awesome 整个包(上图中的 font-awesome 目录、如无必要可以删除 less scss 目录)拷贝到项目中(不要改变它原本的目录结构)。
2. 然后在项目中引入 font-awesome.css ,对于 ExtJS ,有两种引入的方式,可以依照项目的习惯自行选择:
a. 在项目的 html (默认是 index.html)文件中直接使用 引入这个 css
1.
<link rel=
"stylesheet"
type=
"text/css"
href=
"resources/lib/font-awesome/css/font-awesome.min.css"
>
b. (如果项目依赖 sencha cmd 的话可以使用这种方式)打开 app.json 在 css 属性中添加 一个 path ,path 的值是 font-awesome.css 的路径,然后 update 设为 full (这个值得意思请看 app.json 中的注释)。
01.
"css"
: [
02.
{
03.
"path"
:
"bootstrap.css"
,
04.
"bootstrap"
:
true
05.
},
06.
{
07.
// path to font-awesome.min.css
08.
"path"
:
"resources/lib/font-awesome/css/font-awesome.min.css"
,
09.
"update"
:
"full"
10.
}
11.
]
然后重新打包一次项目。在终端中到项目的目录运行
1.
sencha app build
在 ExtJS 中通过设置 glyph 属性来显示 Font Awesome 图标
ExtJS 的一些组件(button / menu item / image / header)的 glyph 属性允许指定一个文字去当作是一个 icon
01.
menu: Ext.create(
'Ext.menu.Menu'
, {
02.
width: 160,
03.
items: [{
04.
text:
'Profile'
,
05.
margin:
'5 0'
,
06.
glyph:
'xf007@FontAwesome'
07.
},{
08.
text:
'Settings'
,
09.
margin:
'5 0'
,
10.
glyph:
'xf013@FontAwesome'
11.
},{
12.
text:
'Logout'
,
13.
margin:
'5 0'
,
14.
glyph:
'xf011@FontAwesome'
15.
}]
16.
})
根据以上代码,我们就能获得这样的效果:
我们可以看到 glyph 的值是 xf007@FontAwesome 这种形式, 这个其实就是字体的 unicode@fontFamily ,就是在这个位置展示 unicode 为 0xf007 的这个字,并且把这个字的 fontFamily设置为 FontAwesome ,这样界面中就能显示 FontAwesome 设计的图标。
我们可以到 FontAwesome 提供的 Cheatsheet 页面查看各种图标对应的 unicode :
http://fortawesome.github.io/Font-Awesome/cheatsheet/
这里需要注意的是这个页面中显示的 unicode 是以 HTML 的标准显示的,如这种 ,而在 JS 解析中以及 ExtJS 支持中,需要转换成 UTF (hex) 这种形式,也就是 0xf042 (首位是零)。在 CSS content 属性中,需要转换为 "\f042" 这种风格。
关于 unicode 的转换以及不同的编码方式请看: http://www.fileformat.info/info/unicode/char/2193/index.htm
简化 ExtJS glyph 的值
如果你觉得每次添加 @FontAwesome 很麻烦的话,那么 ExtJS 有提供一个 setGlyphFontFamily 方法可以让所有的 glyph 的默认的 fontFamily 设为 指定的值。
你可以在项目初始化的时候 ( Ext.app.Application.launch() or init() ) 执行:
1.
Ext.setGlyphFontFamily(
'FontAwesome'
);
1.
init:
function
(){
2.
3.
// setGlyphFontFamily
4.
// FontAwesome 的 Glyph 值请参考 <a href="http://fortawesome.github.io/Font-Awesome/cheatsheet">http://fortawesome.github.io/Font-Awesome/cheatsheet<;/a>
5.
// 将值中的 转换成 0xf038 使用
6.
// 在 ExtJS 中使用依照 glyph 属性
7.
Ext.setGlyphFontFamily(
'FontAwesome'
);
8.
},
如此之后,上面的例子代码就可以写成:
01.
menu: Ext.create(
'Ext.menu.Menu'
, {
02.
width: 160,
03.
items: [{
04.
text:
'Profile'
,
05.
margin:
'5 0'
,
06.
glyph: 0xf007
07.
},{
08.
text:
'Settings'
,
09.
margin:
'5 0'
,
10.
glyph: 0xf013
11.
},{
12.
text:
'Logout'
,
13.
margin:
'5 0'
,
14.
glyph: 0xf011
15.
}]
16.
})
在 template 以及 renderer 中使用 Font Awesome (直接在 DOM 中使用)
上面的方式是配合使用 ExtJS glyph 属性来显示图标,那么如果你需要在你自己的 HTML 代码中使用它的话,那么你可以使用它提供的一些 CSS class 来显示:
1.
<i
class
=
"fa fa-area-chart"
></i>
你可以自行添加一些 class 或者其它手段来控制它的大小和颜色样式,就如同一般的 “文字” 那样处理。
图标的列表以及对应的 class name 可以查看这个页面: http://fontawesome.io/icons/
扩展阅读
1. ExtJS 也可以随意搭配其它的字体图标,你只需要知道每个图标的 unicode 以及这个图标集合设置的 FontAwesome 即可(可以到 css 文件中找)。
2. Font Awesome 这种图标字体的优缺点分别是:
优:矢量化可以任意大小、任意颜色 / 更小的文件体积 / 可以支持更多的浏览器
缺:整个图标的颜色就是字体颜色,图标本身无法多个色彩(在扁平化风格中不是大问题)/ 当用户环境使用了强制字体的时候,图标字体可能回失效
3. 如何制作字体图标?
4. 时下新的趋势是 Svg icon
5. 符合中文环境的图标集合(国内的 SNS 之类的):IconFont | Lomeye
作者: lingyired
原文: http://lingyi.red/using-font-awesome-in-extjs
- 在 ExtJS 中使用 Font Awesome
- 在Android中使用Font-Awesome
- 在Android中使用Font-Awesome
- 在WordPress主题中使用Font Awesome
- 使用font-awesome 在input框中增加一个图标
- 在canvas中应用font-awesome字体
- Font Awesome 在IE8下使用
- Android中Font Awesome的使用
- 使用Font Awesome
- Font Awesome 使用
- 在vue-cli的组件模板里使用font-awesome
- 使用font-awesome小图标
- Font Awesome图标字体使用
- Font Awesome插件的使用
- Font Awesome 图标使用总结
- 图标库font-Awesome使用教程
- 使用图标字体Font Awesome
- 有了Font Awesome,再也不担心没图标用了----Font Awesome字体图标在android中的使用
- Java设计模式_行为型_责任链模式_差旅报销如此简单
- 使用注解的Hibernate many-to-many映射
- ClickOnce发布WCF客户端程序(VS2008 NetFramework 2.0 SP2 编译版本)思路
- Java并发库(四):传统线程同步通信技术
- HDU5162Jump and Jump...
- 在 ExtJS 中使用 Font Awesome
- virtualbox中win7虚拟机与mac主机传输文件之共享文件夹方式
- PL0编译器分析与语法扩展
- jQuery dataTable使用详解
- 阿里YunOS 5发布:稳居国内手机操作系统前三
- Bootstrap Manifest Generator(BMG) 生成的product.xml 试分析
- Bsie:让 Bootsrap 兼容 IE6-8 浏览器
- idea中常用的快捷键
- JAVA面向对象之多态