Question

最新的sencha touch使用webfonts作为图标，但WP8对web字体有一些限制，请参阅Using css font-face in a Phonegap Windows Phone 8 app

Answer 1

花了一天后，我发现了简单的解决方法。由于sencha touch对win和android有不同的css，我们接下来会做。对于我们所有的图标，我正在添加课程胜利

{
                        align: 'left',
                        name: 'nav_btn',
                        iconCls: 'list win',
                        ui: 'plain'
                    },

然后在win.scss（或css没关系）

.list.win {
  background-image: url('data:image/png;base64,BASE64ICON');
}

但在这种情况下，它会显示内容字母以便修复它

.x-tab .x-button-icon.list.win:before,
.x-button .x-button-icon.list.win:before,
.x-tab .x-button-icon.settings.win:before,
.x-button .x-button-icon.settings.win:before{
  content: none;
}

它不是最好的解决方案，但不能解决我的问题..

Answer 2

详细说明Volodymyr的答案，我建议使用mixin来避免重复css代码，并利用Sencha在Windows Phone上应用于x-windowsphone类的主体。结果更加紧凑：

@mixin windowsphone-icon($name, $icon) {

    .x-tab .x-button-icon.#{$name}:before,
    .x-button .x-button-icon.#{$name}:before {
        content: none;
    }

    .x-button-icon.#{$name} {
        background-image: url(#{$icon});
        background-repeat: no-repeat;
        background-size: contain;
    }

}

.x-windowsphone {

    @include windowsphone-icon('list', '../images/icons/list.png');

}

Sencha touch + WP8 + Cordova - 图标字体未显示 - 解决方法

2 个答案: