-phonegap- Icomatic Topcoat圖標在Chrome中呈現，但不是在Android中

我正在試圖使用Phonegap上的圖標製作自定義按鈕。-phonegap- Icomatic Topcoat圖標在Chrome中呈現，但不是在Android中

我使用了https://github.com/topcoat/icons和www.icomatic.io來創建圖標。然後我將結果的icomatic文件保存在www/css/icomatic文件夾中。

出於某種原因，下面的代碼工作（顯示圖標）在我的正常的（鉻）瀏覽器上，但不能在我的手機（它只是顯示字相機的按鈕）：

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

我用在wwww/css/icomatic.css文件夾中輸入icomatic.css。 CSS的是：

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

這樣的引用：

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

謝謝！

//編輯：看來這個問題上的某些設備/軟件具體存在的（Android 4.3以上，的Xperia Z）

在我試過其他Android設備，相機圖標出現了正常..

來源

2014-02-20 Tim

你可以提供該圖標的CSS？這可能是一個路徑問題。 –

據我可以看到所有的CSS是由icomatic生成的，我沒有額外的CSS .. – Tim

我得到的是，如何在CSS中引用該文件？ Android是非常具體的如何路徑到JS和CSS文件，所以也許路徑設置文件是不兼容的android。您可能需要更改路徑才能顯示。 –

在icomatic.css文件的頂部，當我改變font-face定義爲首先使用SVG格式時，它解決了這個問題。我猜測EOT類型的字體在Android 4.3上還沒有完全支持。

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

來源

2014-03-26 14:09:31 Rocky

我有同樣的問題。然後我閱讀Icomatic文檔的常見問題解答，可在Zip中的icomatic字體附帶的icomatic.html文件底部訪問。他們提到JavaScript腳本icomatic.js提供了一個不支持完全@ font-face和連字符的瀏覽器。

所以，你應該添加到您的html頁面已經mentionned現有的配置：

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

對於一個頁面，此回退並沒有作品，所以我有我的html頁面的結束之前：

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

現在我有我的icomatic圖標集合在Android Kitkat和Jelly Bean上工作。 Icomatic提到他們甚至支持Android 1+，比如說CupCake！和iOS 3+。

來源

2014-06-03 11:54:12

-phonegap- Icomatic Topcoat圖標在Chrome中呈現，但不是在Android中

回答

相關問題