Font Packages

ExtJS 提供三种 Web Font 。这些字体可以用于为组件设置图标，使用 iconCls 或者 glyph配置属性。

可用字体

三种可用的字体如下表所示：

Font Package	Package Name	fontCls	iconPrefix	fontFamily
ExtJs	font-ext	ext	ext	ExtJS
Font Awesome	font-awesome	x-fa	fa	FontAwesome
Pictos	font-pictos	pictos	pictos	Pictos

备注：Ext JS 6+ 支持 Font Awesome 4.4.0 版本。参见 Font Awesome Cheatsheet ，Glyph Icon （Ext JS 未包含，借鉴）。

如果要使用上述的三种字体，需要在 app.json 文件（应用程序）或者 package.json文件（主题或代码包）的 requires 数组中添加上述字体的 Pacakge Name值：

// Require the Pictos font package
"requires": [
    "font-pictos"
]

一旦引用后，就可以通过 iconCls 或者 glyph 配置属性为组件添加图标。

配置属性 iconCls 可以使用预定义的CSS样式设置图标，方法是用 web font 的字符名称（例如：home / help /info 等）。

iconCls: '{fontCls} {iconPrefix}-{iconName}'

{fontCls} 和 {iconPrefix} 的值使用上述表格中的字体信息， {iconName} 可以从字体包中的字体清单查询。

例如：设置 Pictos 的 home 图标，你可以设置 iconCls 属性为：

iconCls: 'pictos pictos-home'

类似的，设置 Font Awesome 的 home 图标，你可以设置 iconCls 属性为：

iconCls: 'x-fa fa-home'

经典工具包中，许多组件（例如：button、menuitem）有一个 glyph 配置属性，允许你用字符或十六进制值指示图标在字体包中的索引位置。

例如：使用 Picos 的 home 图标，你可以设置 glyph 属性为：

glyph: 'H'

或者

glyph: 'x48' // ASCII 'H'

如果你使用了多个字体包，可以在属性中指定使用哪个字体：

glyph: 'x48@FontAwesome'