Пользовательские значки Fontello неправильно отображаются на мобильных устройствах

Я экспортировал набор иконок из Sketch как SVG и обработал их через Fontello для использования на моем веб-сайте. Все хорошо для настольного компьютера (включая мобильные представления), но внутренние пути, кажется, "исчезают" на мобильных устройствах определенно.

Я протестировал это на iOS и Android, с браузером Safari по умолчанию, веб-браузером Android и Google Chrome для мобильных устройств, и получил тот же результат.

В Sketch я использую Combined Shape с Union, я пытался сделать это и с Adobe Illustrator, но у меня был тот же результат.

Как это выглядит на рабочем столе: значки на рабочем столе

Как это показывает на мобильных устройствах значки на мобильных устройствах

Вот пример SVG, который экспортировал мой Sketch.

<?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 ответ

К вашему сведению Fontello не поддерживает правила заполнения или заполнения. Все еще пытаюсь понять, как обойти эту иконку с моим значком, но это приведет к описанному вами поведению.

Другие вопросы по тегам