Icon-font 切断图标顶部

Question

我在 CSS 中对 icon-fonts 比较陌生，现在运行遇到以下问题：我有几个包含图标的盒子。遗憾的是图标的上半部分被裁掉了。

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

(我用的Icon-Font是http://linea.io)

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

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

如果我删除它，Icon-Color 将变成黑色并完整显示。

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

但是我删除了几乎所有的个人CSS，错误仍然存在。

Answer 1

那些看起来不像 CSS 字体，它们只是 SVG。当 SVG 的 viewBox、高度或宽度 不正确时，往往会发生您看到的偏移错误。如果您仍然需要使用它们，您应该内联它们，只需复制并粘贴 SVG 代码即可。

摘自您发布的link：

<?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 你可能会找到你喜欢的东西。

Icon-font 切断图标顶部

Icon-font cuts off top of icon

css

clipping

icon-fonts