html - 更改 Bootstrap 徽章中的 Glyphicon 边距/填充

Question

我在徽章中使用字形图标，我希望字形图标的字体大小小于文本。这工作正常，但现在字形图标没有在徽章中垂直居中。

当我尝试给它一个 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

有什么想法吗？

Answer 1

只需添加 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
}

注意:我删除了填充并添加了高度

Fiddle