isabella232 / senchatouch-windowsphone-fontface

@font-face replacement for Sencha Touch on Windows Phone

senchatouch-windowsphone-fontface

Windows Phone does not allow to specify @font-faces if the page was loaded via file: protocol, e.g if the page is hosted locally on the phone itself.

Since Sencha Touch uses @font-faces to display icons, only the content letter will be visible on Windows Phone.

As the only workaround all icons has to be loaded as background images instead.

Windows Phone 8.1

The issue has been resolved with Windows Phone 8.1 and IE11.

Sass configuration

1. Exclude pictos font and default icons

$include-pictos-font: false;
$include-default-icons: false;

2. Import the variables for windows

@import "sencha-touch/windows";
@import "sencha-touch/default";

3. Import the mixin

@import "stylesheets/mixins/windowsphone-icon";

4. Include the icons you need

@include windowsphone-icon("home", "icons/home.png");
@include windowsphone-icon("star", "icons/star.png", "icons/star_active.png");

Sass mixin

@mixin windowsphone-icon($name, $icon, $active-icon: null) {
	.x-tab .x-button-icon.#{$name}:before,
	.x-button .x-button-icon.#{$name}:before {
		content: none;
	}

	.x-tab .x-button-icon.#{$name} {
		background-size: 65%;
		background-position: 6px 6px;
	}

	.x-button-icon.#{$name} {
		background-image: theme_image("../../../../resources/", #{$icon});
		background-repeat: no-repeat;
		background-size: contain;
	}

	@if $active-icon != null {
		.x-tab-active .x-button-icon.#{$name},
		.x-tab-pressed .x-button-icon.#{$name},
		.x-button-pressing .x-button-icon.#{$name} {
			background-image: theme_image("../../../../resources/", #{$active-icon});
		}
	}
}

License

This source code is released under the MIT License.