如何在ExtJS 7.x中使用Font Awesome 5.x常规或双色调图标

问题说明 #

ExtJS从5.x升级到7.x后，Font Awesome 5.x仅能显示实心图标，尝试切换常规（far）、品牌（fab）等样式时失效，但图标旋转功能正常，且fonts目录已包含fa-brands、fa-regular、fa-solid相关文件。

解决方案 #

1. 遵循ExtJS的Font Awesome类名规则 #

ExtJS对Font Awesome图标有特定的类名要求，必须以x-fa作为前缀，后续紧跟FA的样式类（far/fas/fab）和图标名称，正确写法示例：

• 实心图标：iconCls: 'x-fa fas fa-arrow-circle-right'（或省略fas，默认加载实心样式）
• 常规图标：iconCls: 'x-fa far fa-arrow-circle-right'
• 品牌图标：iconCls: 'x-fa fab fa-github'

2. 确保加载完整的Font Awesome CSS #

ExtJS的Font Awesome包可能默认只加载了实心样式的CSS，需要手动引入包含所有样式的CSS文件：
在应用的app.json的css数组中添加完整的Font Awesome CSS引用：

"css": [
    // 保留原有CSS配置
    {
        "path": "${package.dir}/build/packages/font-awesome/resources/css/font-awesome-all.css"
    }
]

如果只需要特定样式，也可以单独引入：

// 引入常规样式CSS
{
    "path": "${package.dir}/build/packages/font-awesome/resources/css/font-awesome-regular.css"
},
// 引入品牌样式CSS
{
    "path": "${package.dir}/build/packages/font-awesome/resources/css/font-awesome-brands.css"
}

3. 验证字体文件路径匹配 #

检查Font Awesome CSS文件中引用的字体路径是否与实际目录一致。例如，CSS中字体路径通常为../fonts/[字体文件名]，确认你的resources/extjs-7.6.0.41/build/packages/font-awesome/resources/fonts目录下存在对应字体文件，且路径无拼写错误。

4. 清除缓存并重新构建应用 #

• 执行sencha app build命令重新构建应用，确保新的CSS配置生效
• 清空浏览器缓存（Ctrl+Shift+R）后重新加载页面，避免缓存导致的样式不更新

内容的提问来源于stack exchange，提问作者Tech-Maou