Question

MyApp只是我试图编辑的“入门”基本应用，以便找到我在Sencha周围的方式。

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

根据在线信息，我发现我已经在我的resources / sass / app.scss文件中输入了该文件

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

我使用指南针重新编译了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检查）。

一如往常，任何帮助都会受到赞赏。

Answer 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');

Answer 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）;

无法向标签添加非默认图标 - Sencha Touch 2.3.0

2 个答案: