"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应用中得到良好的显示效果。