图标-字体切断图标顶部。
图标-字体切断图标顶部。
提问于 2018-12-27 20:47:40
我对CSS中的图标字体相当陌生，现在遇到了以下问题:我有几个包含图标的框。不幸的是，图标的上部被剪掉了。
我发现，我使用的图标字体是添加一个：：(见截图)
(我使用的图标字体是http://linea.io)
我对furhter进行了反演，并意识到这只是因为我在图标上有以下CSS：
-webkit-background-clip: text;
color: transparent;如果我删除这一点，图标颜色将变成黑色和显示整体。
我不知道这是否是因为我的CSS中的一个bug，因为我无法在网上找到任何东西。
但我删除了几乎所有的个人CSS和错误仍然发生。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-12-27 21:02:32
这些看起来不像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图标库，我建议您使用一些更测试的东西，比如字体太棒了。但这些都是十分之一的钱，如果你在谷歌上搜索，你可能会找到你喜欢的东西。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53950724
复制相关文章
相似问题
腾讯云开发者
