我正在尝试使用 Phonegap 制作一个带有图标的自定义按钮。
我用了https://github.com/topcoat/icons和 www.icomatic.io 来创建图标。 然后我将生成的 icomatic 文件保存在 www/css/icomatic 文件夹中。
出于某种原因,以下代码在我的普通(chrome)网络浏览器中有效(显示图标),但在我的手机上无效(它只显示带有相机一词的按钮):
<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)上
在我试过的另一台安卓设备上,相机图标正常显示..
最佳答案
在 icomatic.css 文件的顶部,当我更改字体定义以首先使用 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');
}
关于android - -phonegap- Icomatic Topcoat 图标在 Chrome 中呈现,但在 Android 中不呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21920117/