https://github.com/katzer/senchatouch-windowsphone-fontface
@font-face replacement for Sencha Touch on Windows Phone
https://github.com/katzer/senchatouch-windowsphone-fontface
font-face sencha-touch windows-phone
Last synced: 3 months ago
JSON representation
@font-face replacement for Sencha Touch on Windows Phone
- Host: GitHub
- URL: https://github.com/katzer/senchatouch-windowsphone-fontface
- Owner: katzer
- License: mit
- Created: 2013-12-04T19:27:18.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2015-06-04T08:09:39.000Z (about 11 years ago)
- Last Synced: 2025-03-23T06:13:51.255Z (over 1 year ago)
- Topics: font-face, sencha-touch, windows-phone
- Language: CSS
- Homepage:
- Size: 148 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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](http://www.sencha.com/forum/showthread.php?261159-ST2.2RC-WP8-Cordova-icon-font-not-shown) 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
```scss
$include-pictos-font: false;
$include-default-icons: false;
```
#### 2. Import the variables for windows
```scss
@import "sencha-touch/windows";
@import "sencha-touch/default";
```
#### 3. Import the mixin
```scss
@import "stylesheets/mixins/windowsphone-icon";
```
#### 4. Include the icons you need
```scss
@include windowsphone-icon("home", "icons/home.png");
@include windowsphone-icon("star", "icons/star.png", "icons/star_active.png");
```
## Sass mixin
```scss
@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](http://opensource.org/licenses/MIT).