Sencha Touch 2.2自定义字体图标教程

"本文主要介绍了如何在Sencha Touch 2.2及更高版本中自定义图标，特别是如何从Sencha Architect 3中使用和引入Pictos字体图标，以及如何添加自定义字体图标。" 在Sencha Touch 2.2之后的版本中，为了适应不同屏幕尺寸和分辨率的需求，原始的图片图标被替换为字体图标。这是因为字体图标是矢量图形，不会因放大而失真，同时可以通过CSS轻松调整大小和颜色，且占用内存更少，加载速度更快。Pictos字体图标是Sencha Architect 3中的默认集成，包含一系列预定义的图标。 要使用这些内置图标，首先需要了解它们在`_Class.scss`文件中的定义，其中`iconCls`用于引用图标名称。在使用图标时，可以在`app.scss`文件中通过`@include icon(‘box’);`这样的语句来引入所需的图标。之后，通过运行`compass compile app.scss`命令将`app.scss`编译为`app.css`。最后，在需要展示图标的组件（如按钮）的`iconCls`属性中设置为已引入的图标名称，例如`'box'`。 对于自定义图标，可以使用在线工具如IcoMoon.io来创建自己的字体图标库。在IcoMoon网站上，可以选择或上传需要的图标，生成自定义字体包。下载字体包后，将其解压缩，将`.ttf`或`.woff`等字体文件复制到项目中的`resources/fonts`目录。接着，在`app.scss`文件中引入新的字体文件，并定义新的图标类名。例如： ```scss @font-face { font-family: 'MyCustomIcon'; src: url('fonts/MyCustomIcon.ttf') format('truetype'); } .my-custom-icon { .x-icon(&::before) { font-family: 'MyCustomIcon' !important; content: '\e900'; // 这里的\e900是自定义图标在字体中的Unicode值 } } ``` 完成上述步骤后，同样需要通过`compass compile app.scss`命令更新样式表，并在组件的`iconCls`属性中使用自定义的类名，如`'my-custom-icon'`，以显示自定义图标。 Sencha Touch 2.2及更高版本使用字体图标提供了一种灵活且高效的方式来管理应用中的图标。无论是使用内置的Pictos图标还是创建自定义图标库，都能确保图标在不同设备上的一致性和清晰度。通过理解这个过程，开发者可以更好地优化其Sencha Touch应用程序的用户体验。