Сенча сенсорный + КР8 + Кордова - значок шрифта не показан - Обход

Question

Последние Сенча сенсорный использует WebFonts для значков, но КР8 имеет некоторые ограничения с веб-шрифты см Using css font-face in a Phonegap Windows Phone 8 app

Answer 1

Проведя один день я только что нашел простой обходной путь. Поскольку sencha touch имеет разные css для win и android, мы делаем следующее. Для всех наших иконах я добавляю класс выиграть

{ 
         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

Елаб оратор на ответ Владимира, я бы предложил использовать mixin, чтобы избежать повторения кода css, и используя класс x-windowsphone, который Sencha относится к телу на 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'); 

}