Иконка-шрифт отсекает верх иконы - PullRequest
Новая
       42

Иконка-шрифт отсекает верх иконы

0 голосов
/ 27 декабря 2018

Я довольно новичок в значках шрифтов в CSS и теперь столкнулся со следующей проблемой: у меня есть несколько ящиков, содержащих значок.К сожалению, верхняя часть пиктограммы обрезается.

Я обнаружил, что иконка-шрифт, который я использую, добавляет элемент :: after-pesudo, который немного смещен относительно исходного элемента, и чтовызывает часть, которая отрезана.(См. Скриншоты)

(Я использую Icon-шрифт http://linea.io)

Element ::before Pseudo Element

Я исследовал фурхтер и понял, что это произошло только из-за того, что у меня есть следующий CSS на иконке: 

-webkit-background-clip: text;
color: transparent;

Если я уберу это, цвет значка станет черным и будет показанцелое.

Я не знаю, связано ли это с ошибкой в ​​моем CSS, поскольку я не смог ничего найти в Интернете.

Но я удалил почти весь свой личный CSS иошибка все еще произошла.

1 Ответ

0 голосов
/ 28 декабря 2018

Они не похожи на CSS-шрифты, они просто SVG.Эта ошибка с установленным значением, которую вы видите, имеет место, когда viewBox, height или width SVG не корректны.Если вам все еще нужно их использовать, вы должны встроить их, просто скопируйте и вставьте код SVG.

Взятый по ссылке, которую вы разместили: 

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
<g>
    <circle fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" cx="32" cy="22" r="6"/>
    <path fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M53,22.735C52.948,10.73,43.599,1,32,1
        s-21,9.73-21,21.735C11,38.271,31.965,63,31.965,63S53.069,38.271,53,22.735z"/>
</g>
</svg>

Если вы предпочитаете использовать настоящий CSSБиблиотека значков, я бы рекомендовал использовать что-то более проверенное, например Font Awesome .Но это десяток, и если вы Google, вы можете найти что-то, что вам нравится.

...