无法将非默认图标添加到选项卡 - Sencha Touch 2.3.0答案

【问题标题】：Cannot add non-default icons to tabs - Sencha Touch 2.3.0无法将非默认图标添加到选项卡 - Sencha Touch 2.3.0
【发布时间】：2014-09-25 13:11:29
【问题描述】：

MyApp 只是“入门”的基本应用程序，我正在尝试对其进行编辑，以便在 Sencha 中找到自己的方式。

现在我要做的就是在标签中添加一个邮件图标。查看 touch/resources/themes/pictos 文件夹（我认为它可以显示作为 pictos 字体的一部分可供我使用的内容）我看到了我想要的名为 mail 的图标。

根据我发现的在线信息，我已将其输入到我的 resources/sass/app.scss 文件中

@import 'sencha-touch/default';
@import 'sencha-touch/default/all';
@include icon('mail');

我已经使用 compass 重新编译了 sass 文件，没有错误

我的 app/view/main.js 文件包含

Ext.define('MyApp.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
requires: [
    'Ext.TitleBar'
],
config: {
    tabBarPosition: 'bottom',

    items: [
        {
            title: 'Welcome',
            iconCls: 'home',

            styleHtmlContent: true,
            scrollable: true,

            items: {
                docked: 'top',
                xtype: 'titlebar',
                title: 'App Title'
            },

            html: [
                "Content"
            ].join("")
        },
        {
            title: 'Contact Us',
            iconCls: 'mail',

            styleHtmlContent: true,
            scrollable: true,

            items: {
                docked: 'top',
                xtype: 'titlebar',
                title: 'Contact Us'
            },

            html: [
                "Content"
            ].join("")
        }
    ]
}
});

然后使用 sencha cmd 4 编译 Sencha

现在根据我能找到的所有文档，应该是它，但图标不显示，我什至尝试跟随 this tutorial 添加来自 icomoon 的自定义图标，结果完全相同，编译时没有错误但图标不显示。

我应该补充一下，似乎 sencha 使用 css 通过“after”选择器和“content”属性添加图标（字体），但它似乎没有被设置（通过 chrome 检查）。

一如既往地感谢任何帮助。

【问题讨论】：

标签： sencha-touch

【解决方案1】：

这成功了

@import 'sencha-touch/default'; 
@import 'sencha-touch/default/all';
@include icon-font('Pictos',
inline-font-files('pictos/pictos-web.woff', woff, 'pictos/pictos-web.ttf', truetype,'pictos/pictos-web.svg', svg));
@include icon('mail');

【讨论】：

【解决方案2】：

如果您使用 icomoon 字体，请使用 @include icon-font('mail',inline-font-files('pictos/mail.woff',woff,'pictos/mail.ttf',truetype,'pictos/mail.svg',svg);

然后包含图标

@inclue icon('mailicon','$',mail);

【讨论】：