-phonegap- Icomatic Topcoat icons render in Chrome but not in Android

Question

I'm trying to make a custom button with an icon on it using Phonegap.

I used https://github.com/topcoat/icons, and www.icomatic.io to create the icons. Then I saved the resulting icomatic files in a www/css/icomatic folder.

For some reason the following code works(shows the icon) in my normal (chrome) webbrowser, but not on my phone (it just displays the button with the word camera):

<button class="topcoat-icon-button" id="takePicture">
    <span class="topcoat-icon icomatic">camera</span>
</button>

I use the icomatic.css in the wwww/css/icomatic.css folder. The css is:

src: url('icomatic.eot');
src: url('icomatic.eot?#iefix') format("embedded-opentype"),
     url('icomatic.woff') format("woff"),
     url('icomatic.ttf') format("truetype"),
     url('icomatic.svg#icomatic') format('svg');

referenced like this:

<link rel="stylesheet" type="text/css" href="css/icomatic/icomatic.css"/>

Thanks!

//EDIT: It seems this issue is occuring specifically on certain device/software(Android 4.3, Xperia Z)

On another android device I tried, the camera icon showed up normally..

Answer 1

At the top of the icomatic.css file, when I changed the font-face definition to use the SVG format first, it fixed the problem. I'm guessing the EOT type font isn't fully supported on Android 4.3 yet.

@font-face {
font-family: 'Icomatic';
src: url('icomatic.svg#icomatic') format('svg');
src: url('icomatic.eot?#iefix') format("embedded-opentype"),
     url('icomatic.woff') format("woff"),
     url('icomatic.ttf') format("truetype"),
     url('icomatic.svg#icomatic') format('svg');
}