Sencha Touch 2.2 自定义字体图标指南

"Sencha Touch 自定义图标教程" 在Sencha Touch中，图标管理经历了从图片到字体图标的转变，特别是在Sencha Touch 2.2版本之后。这种变化主要是为了应对不同屏幕尺寸、密度和分辨率的移动设备，字体图标作为矢量图形，具有不失真的优点，并且体积小、加载速度快，便于通过CSS进行样式调整。 内置图标通常在`_Class.scss`文件中定义，例如在`appPath\touch\resources\themes\stylesheets\sencha-touch\base\mixins\_Class.scss`，你可以找到一个名为`iconCls`的引用，用于指定图标的名称。这些图标来自Pictos字体库，但Sencha Touch仅引入了部分常用图标。 使用内置图标的基本步骤如下： 1. 查找图标定义：在`_Class.scss`文件中查看可用的图标名称。 2. 引入图标：在`appPath\resources\sass\app.scss`文件中，使用`@include icon('box')`这样的语句引入你需要的图标。 3. 编译SCSS文件：通过在CMD或终端中运行`compass compile app.scss`命令，将SCSS文件编译为CSS文件。 4. 应用图标：在组件（如按钮）的`iconCls`属性中设置为已引入的图标名称，如`'box'`，即可显示对应图标。 如果你需要自定义图标，可以遵循以下步骤： 1. 访问网站：使用在线工具如[IcoMoon](https://icomoon.io)创建自定义字体图标集。 2. 选择或上传图标：在IcoMoon中选择你需要的图标，或者上传自己的SVG图标。 3. 下载字体包：生成并下载包含自定义图标的字体文件和样式表。 4. 将字体文件添加到你的项目中，通常是`resources/fonts`目录。 5. 引入自定义样式：在`app.scss`文件中引入自定义字体样式，并定义新的图标类。 6. 编译并应用：同内置图标一样，编译SCSS文件，并在组件的`iconCls`中使用自定义的类名。 通过这种方式，你可以根据项目需求灵活管理和使用图标，无论是内置的还是自定义的，都能在Sencha Touch应用中得到良好的显示效果。