图标字体切断图标顶部

Posted 2023-03-23

【中文标题】图标字体切断图标顶部

【英文标题】：Icon-font cuts off top of icon

【发布时间】：2019-05-25 19:38:20

【问题描述】：

我对 CSS 中的图标字体比较陌生，现在遇到了以下问题： 我有几个包含图标的框。遗憾的是，图标的上半部分被剪掉了。

我发现，我使用的图标字体是添加一个 ::after-pesudo-element，它与原始元素略有偏移，导致部分被切断。 （见截图）

（我使用的图标字体是http://linea.io）

我进一步调查并意识到这只是因为我在图标上有以下 CSS：

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

如果我删除它，图标颜色将变为黑色并显示为整体。

我不知道这是否是由于我的 CSS 中的错误，因为我在网络上找不到任何东西。

但我删除了几乎所有我的个人 CSS 并且错误仍然出现。

【问题讨论】：

请发布更多代码

【参考方案1】：

那些看起来不像 CSS 字体，它们只是 SVG。当 SVG 的 viewBox、高度或宽度 不正确时，您看到的偏移错误往往会发生。如果您仍然需要使用它们，您应该内联它们，只需复制并粘贴 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"
       viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
<g>
    <circle fill="none" stroke="#000000" stroke- stroke-miterlimit="10" cx="32" cy="22" r="6"/>
    <path fill="none" stroke="#000000" stroke- 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。但这些都是一毛钱，如果你用谷歌搜索，你可能会找到你喜欢的东西。