自定义Fontello图标在移动设备上显示不正确

时间:2016-04-06 15:01:28

标签: android ios mobile fontello

我已将Sketch中的一组图标导出为SVG,并通过Fontello进行处理,以便在我的网站上使用。桌面(包括移动视图)的一切都很好,但内部路径似乎特别在移动设备上“消失”。

我已经在iOS和Android上测试了这个,使用默认的Safari浏览器,Android网络浏览器和Google Chrome浏览器,并获得了相同的结果。

在Sketch中,我使用的是联合形状和联盟 我也尝试使用Adobe Illustrator,但结果相同。

它在桌面上的显示方式: icons on desktop

它如何在移动设备上显示 icons on mobile devices

以下是我的Sketch已导出的SVG示例。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="113px" height="113px" viewBox="0 0 113 113" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 3.6 (26304) - http://www.bohemiancoding.com/sketch -->
<title>Combined Shape</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Introduction" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="Facebook" transform="translate(-1.000000, -1.000000)" fill="#000000">
        <path d="M114,57.5 C114,26.2959116 88.7040884,1 57.5,1 C26.2959116,1 1,26.2959116 1,57.5 C1,88.7040884 26.2959116,114 57.5,114 C88.7040884,114 114,88.7040884 114,57.5 L114,57.5 L114,57.5 L114,57.5 L114,57.5 L114,57.5 Z M49.9465,88.7759701 L61.4605,88.7759701 L61.4605,59.8388273 L71.0245,59.8388273 L72.5035,48.5534939 L61.4605,48.5534939 L61.4605,41.3001606 C61.4605,39.5233987 61.8655,38.1550177 62.6065,37.1980654 C63.3475,36.3081606 64.7605,35.8296844 66.9145,35.8296844 L72.7735,35.8296844 L72.7735,25.7725415 C70.7545,25.4312082 67.9255,25.2940654 64.2235,25.2940654 C59.9125,25.2940654 56.4115,26.5923511 53.8525,29.1950177 C51.2275,31.7915892 49.9465,35.4853035 49.9465,40.2060654 L49.9465,48.5534939 L40.3855,48.5534939 L40.3855,59.8388273 L49.9465,59.8388273 L49.9465,88.7759701 L49.9465,88.7759701 L49.9465,88.7759701 L49.9465,88.7759701 L49.9465,88.7759701 Z" id="Combined-Shape"></path>
    </g>
</g>
</svg>

1 个答案:

答案 0 :(得分:-1)

FYI Fontello不支持填充规则或填充。仍然试图弄清楚如何绕过这个w /我的图标,但它会导致你描述的行为。