在 Sencha Touch 中，究竟如何将 Tab Panel 中的图标更改为 Sencha Touch 中包含的现有 picto 图标之一？答案

【问题标题】：In Sencha Touch, exactly how do I change the icon in the Tab Panel to one of the existing picto icons included in Sencha Touch?在 Sencha Touch 中，究竟如何将 Tab Panel 中的图标更改为 Sencha Touch 中包含的现有 picto 图标之一？
【发布时间】：2014-11-10 03:50:50
【问题描述】：

我在整个 Stackoverflow 中彻底研究了这个问题，但还没有找到准确的答案，所以这是我的问题。

我正在使用 Sencha Touch 2.4。我正在使用它的默认主题，即您第一次下载 Sencha Touch 并设置为第一次在其中开发时看到的主题。我是 Sencha 的新手。

在 Sencha 中，我正在制作一个选项卡面板，在选项卡面板中，我试图在选项卡栏中包含开发工具包中包含的许多漂亮的小 picto 图标之一，这些图标未包含在默认主题中，使用代码行数：

                title: 'Transfer',
                iconCls: 'photo2',
                html: 'Text stuff'

此外，我阅读的所有指南都告诉我进入该主题的适当 .scss 文件并添加一行代码，如下所示：

@include pictos-iconmask('photo2');

显然这行代码似乎应该放在默认主题文件夹的tab目录下的Panel.scss中，但这行不通。现在我不知道应该是哪个 .scss 文件。从那以后，我进入了我的 SDK 中的每个 .scss 文件，标记了与我的主题相关的内容，例如“tab”、“Panel”、“all”、“app”等，并添加了这行代码，但图标不会出现。我显然错过了一些东西。有人请告诉我，假设默认主题，究竟是哪个文件，哪个目录以及该文件中的哪一行代码，我将这段代码放置在

@include pictos-iconmask('photo2');

感谢您提供的任何帮助。

【问题讨论】：

标签： extjs touch

【解决方案1】：

在 Sencha Touch 2.4 中，只需包含图标（而不是 pictos-iconmask）。例如：

@include icon('photo2');

我建议在高级文件中执行此操作，而不是像 tab.Panel.scss 这样的范围文件。以后你总是可以缩小你的 SCSS 范围，但是为了调试，只需将 include 扔到你的基础 app.scss 中以确保它首先工作。

【讨论】：

谢谢。试过这个，但它不起作用。（照片 2 显示空白图标空间）。需要重新编译吗？

【解决方案2】：

您可以使用以下 css 代码来完成您的任务：

.x-tab .x-button-icon.photo2:before, .x-button .x-button-icon.photo2:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
font-family: "Pictos";
content: "N"; //mention your pictos character here like i have mentioned N here
}

【讨论】：