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

Question

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

Answer 1

花了 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 代码，并利用x-windowsphoneSencha 适用于 Windows Phone 主体的类。结果更加紧凑：

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

}