图标字体切断了图标的顶部

Question

我对CSS中的图标字体不是很熟悉，现在遇到了以下问题： 我有几个包含一个图标的框。不幸的是，图标的上部被裁剪掉了。

我发现，我使用的图标字体添加了:: after-pesudo-element，该元素与原始元素略有偏移，从而导致该部分被切除。 （请参见屏幕截图）

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

我反省了一下，并意识到这仅是由于我在Icon上具有以下CSS的事实所致：

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

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

。

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

但是我删除了几乎所有的个人CSS，并且该错误仍然发生。

Answer 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"
     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，您可能会找到自己喜欢的东西。