标签：font fa ext pictos iconCls Font ExtJS 图标
更新记录
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中引入图标文件即可。
标签：font,fa,ext,pictos,iconCls,Font,ExtJS,图标 来源： https://www.cnblogs.com/cqpanda/p/16492659.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。