cordova - Sencha touch + WP8 + Cordova - アイコンフォントが表示されない - 回避策

Question

最新の sencha touch はアイコンに Web フォントを使用していますが、WP8 には Web フォントに関するいくつかの制限があります。「 Phonegap Windows Phone 8 アプリで css font-face を使用する」を参照してください。

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

}