我使用自定义 .svg 图标创建了一个图标字体,但我遇到了填充问题(或者可能是其他问题)。我以前的图标不包含任何填充,以防出现这个问题。
出于某种原因,图标似乎已经移动到它们应该在的位置上方,我找不到任何方法将它们放回容器中。这是我正在谈论的示例:http://i.imgur.com/RwOKWLp.png
我已将“背景色”设置为黄色以突出显示我的问题。
这是一个图标的 HTML:
<div class="vicon" aria-hidden="true" data-icon=""></div>
这是我目前正在使用的 CSS:
[data-icon]:before {
font-family: 'iconfont';
content: attr(data-icon);
speak: none;
font-size: 100%;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.vicon {
display: inline-block;
font-size: 50px;
margin-top: 1em;
background-color: yellow;
}
@字体代码:
@font-face {
font-family: 'iconfont';
src:url('[font_location_on_company_server].eot');
src:url('[font_location_on_company_server].eot?#iefix') format('embedded-opentype'),
url('[font_location_on_company_server].woff') format('woff'),
url('[font_location_on_company_server].ttf') format('truetype'),
url('[font_location_on_company_server].svg#icon_font') format('svg');
font-weight: normal;
font-style: normal;
}
有谁知道为什么会发生这种情况?
最佳答案
问题不在于 CSS,而在于字体的基线高度(参见 http://icomoon.io/#docs/font-metrics)
这意味着字体规范是错误的。我不知道你是否更改了它们,或者这是 Icomoon 的错误,但我现在已经能够导出正确的字体。
无论如何你不能(或者至少你不应该)用 CSS“纠正”这个。最好的方法是更改字体。
关于html - 自定义图标字体的填充问题 (?)。下面的例子,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16175333/