Question

我正在尝试使用Phonegap制作一个带有图标的自定义按钮。

我使用https://github.com/topcoat/icons和www.icomatic.io来创建图标。然后我将生成的icomatic文件保存在www / css / icomatic文件夹中。

出于某种原因，以下代码在我的普通（chrome）webbrowser中工作（显示图标），但不在我的手机上（它只显示带有相机一词的按钮）：

<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设备上，相机图标正常显示..

Answer 1

在icomatic.css文件的顶部，当我更改font-face定义以首先使用SVG格式时，它修复了问题。我猜测Android 4.3尚未完全支持EOT类型字体。

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

Answer 2

我遇到了同样的问题。然后我阅读了Icomatic文档的FAQ，可以在Zip中的icomatic字体附带的icomatic.html文件的底部访问。他们提到Javascript脚本icomatic.js为不支持完全@ font-face和ligature的浏览器提供了回退。

因此，您应该添加到您的html页面中已经提到的现有配置：

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

对于一个页面，这个后备功能不起作用，所以我之前的html页面结束了：

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

现在我在Android Kitkat和Jelly Bean上运行了我的icomatic图标集。 Icomatic提到它们甚至支持Android 1+，比如说CupCake！和iOS 3 +。

-phonegap- Icomatic Topcoat图标在Chrome中呈现，但在Android中不呈现

2 个答案: