ExtJS-内置字体图标（Font）

更新记录
2022年7月27日 发布。
2022年7月6日 从笔记迁移到博客。

ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html

说明

ExtJS内置支持三种字体图标#

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

在SDK 的build包目录下：\ext73\7.3.0.55\commercial\build\packages

可以看到支持的三种字体图标包的文件信息

font-awesome字体图标包

安装方法1-在app.json中引入包#

该方法适合使用Sencha CMD进行构建的项目

打开app.json文件，找到requires配置项

    "requires": [
        "font-awesome"
    ],

放入需要的字体图标包即可

    "requires": [
        "font-awesome"
    ],

安装方法2-直接引入css文件#

该方法适合直接引入ExtJS的CSS文件和JS文件的项目
注意：记得将Font-Awesome的CSS文件放在ExtJS的CSS文件前面

复制build目录到项目文件夹下：

引入字体图标的CSS文件

<link rel="stylesheet" href="/build/packages/font-awesome/resources/font-awesome-all.css">

图标参考#

所有的图标参考地址：https://fontawesome.com/cheatsheet?from=io
快速关键字查找图标：https://fontawesome.com/icons?d=gallery

使用语法#

所有的图标描述必须以x-fa开头，然后后面接fa-具体的图标名

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

iconCls : 'x-fa fa-car'
iconCls : 'x-fa fa-plus'
iconCls : 'x-fa fa-edit'

实例#

iconCls: 'x-fa fa-car'
iconCls: 'x-fa fa-file'
iconCls: 'x-fa fa-home'
iconCls: 'x-fa fa-folder'

font-pictos字体图标包

安装方法1-在app.json中引入包#

该方法适合使用Sencha CMD进行构建的项目
打开app.json文件，找到requires配置项

    "requires": [
        "font-awesome"
    ],

放入需要的字体图标包即可

    "requires": [
        "font-pictos"
    ],

安装方法2-直接引入css文件#

该方法适合直接引入ExtJS的CSS文件和JS文件的项目
注意：记得将Font-Awesome的CSS文件放在ExtJS的CSS文件前面

复制build目录到项目文件夹下：

引入字体图标的CSS文件

<link rel="stylesheet" href="/build/packages/font-pictos/resources/font-pictos-all.css">

图标参考#

https://docs.sencha.com/extjs/7.3.1/guides/core_concepts/font_ext.html

使用语法#

所有的图标描述必须以pictos开头，然后后面接pictos-具体的图标名

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

iconCls: 'pictos pictos-home'
iconCls: 'pictos pictos-box',

实例

iconCls: 'pictos pictos-home'
iconCls: 'pictos pictos-box',
iconCls: 'pictos pictos-key',
iconCls: 'pictos pictos-power',

font-ext字体图标包

安装方法1-在app.json中引入包#

该方法适合使用Sencha CMD进行构建的项目
打开app.json文件，找到requires配置项

"requires": [
	"font-awesome"
],

放入需要的字体图标包即可

"requires": [
	"font-ext"
],

安装方法2-直接引入css文件#

该方法适合直接引入ExtJS的CSS文件和JS文件的项目
注意：记得将Font-Awesome的CSS文件放在ExtJS的CSS文件前面

复制build目录到项目文件夹下：

引入字体图标的CSS文件

<link rel="stylesheet" href="/build/packages/font-ext/resources/font-ext-all.css">

图标参考
https://docs.sencha.com/extjs/7.3.1/guides/core_concepts/font_ext.html
使用语法
所有的图标描述必须以ext开头，然后后面接ext-具体的图标名

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

iconCls: 'ext ext-unpin',
iconCls: 'ext ext-edit-html',

实例

iconCls: 'ext ext-unpin',
iconCls: 'ext ext-edit-html',
iconCls: 'ext ext-text-color',

其他图标

内置的图标不一定够用或者说符合所有的需求，可以通过直接在html中引入图标文件即可。