我在徽章中使用字形图标,我希望字形图标的字体大小小于文本。这工作正常,但现在字形图标没有在徽章中垂直居中。
当我尝试给它一个 margin-bottom 或 padding-bottom 时,它会将其添加到整个徽章,而不仅仅是 glyphicon 元素。
这是我正在使用的 .css 类:
.glyphicon-test3 {
margin-right: 5px;
font-size: 6px;
padding-bottom: 8px;
}
这是 HTML:
<div>
<span id="test" class="badge">
<span class="glyphicon glyphicon-plus-sign glyphicon-test3"></span>
Small icon with padding
</span>
</div>
我制作了一个 PLNKR,充分展示了效果:http://plnkr.co/edit/VBIeaffmFujY2qcdPcVI
有什么想法吗?
最佳答案
只需添加 top:-1px
并覆盖现有的 top: 1px
到 .glyphicon
选择器
.glyphicon {
position: relative;
top: 1px; <<<This causing the problem
display: inline-block;
font-family: "Glyphicons Halflings";
font-style: normal;
font-weight: 400;
line-height: 1;
}
所以
.glyphicon-test3 {
margin-right: 5px;
font-size: 6px;
line-height: 2;
top: -1px; <<<Here
}
注意:我删除了填充并添加了高度
关于html - 更改 Bootstrap 徽章中的 Glyphicon 边距/填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32300641/