Html 更改引导标记中的图标边距/填充

我正在徽章中使用glyphicon，我希望glyphicon的字体大小小于文本。这很好，但现在标志符号图标在徽章中没有垂直居中

当我尝试给它一个边距底部或填充底部时，它会将其添加到整个徽章中，而不仅仅是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，展示了它的全部荣耀：

---

有什么想法吗？

问题的一部分是glyphicon类指定的top:1px。如果将其覆盖为0，或者在-1时更好，则效果会更好。您可能还想在线条高度也保持不变的情况下使用它。

只需添加top:-1px并覆盖现有的top:1px到.glyph图标选择器即可

所以

注意：我移除了填充物并增加了高度

---

在我的css中，这对我很有用。德国劳埃德船级社

.glyphicons::before {
    padding: 0px;
}

---

请在问题中也包括HTML，这样问题是可复制的。是的-忘记把它放在。。。我已经把它放在那里了。。。它也在plnkr btw中。。。

.glyphicon-test3 {
  margin-right: 5px;
  font-size: 6px;
  line-height: 2;
  top: -1px; <<<Here
}

.glyphicons::before {
    padding: 0px;
}