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

Question

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

557 Views Asked by Tim At 20 October 2024 at 12:55

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..

Original Q&A

There are 2 best solutions below

Pierre Ghislain On 03 June 2014 at 11:54

I had the same problem. Then I read the FAQ that Icomatic document, accessible at the bottom of the icomatic.html file that comes with your icomatic's fonts in the Zip. They mention that the Javascript script icomatic.js offers a fallback to browsers that don't support fully @font-face and ligature.

So you should add to your existing configuration already mentionned in your html page:

<head>
...    
<script src="ico/icomatic.js"></script>
<script>
    window.onload = function() { IcomaticUtils.run(); }
</script>
...
</head>

For one page, this fallback didn't works, so I had a the end of my html page before :

<script>
    IcomaticUtils.run();
</script>

Now I have my icomatic icons collection working on Android Kitkat and Jelly Bean. Icomatic mention that they support even Android 1+, let say CupCake ! and iOS 3+.

**Rocky** · Accepted Answer

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

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

There are 2 best solutions below

Related Questions in ANDROID

Related Questions in CORDOVA

Related Questions in TOPCOAT

Trending Questions

Popular # Hahtags

Popular Questions