在引导徽章中更改图形边距/填充

我在徽章中使用图形，并且希望图形比文本具有更小的字体大小。这工作正常，但现在图形不在徽章中垂直居中。在引导徽章中更改图形边距/填充

当我尝试给它一个边缘底部或填充底部时，它会将它添加到整个徽章中，而不仅仅是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

任何想法？

来源

2015-08-30 Tom O' Brien

请在问题中也包含HTML，以便问题具有可重现性。 – Roope

是的 - 忘了把它放在...我已经把它放在那里了......它也在plnkr btw ... –

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

来源

2015-08-30 20:34:11 Shehary

谢谢 - 现在看起来不错！ –

问题的一部分是glyphicon类指定的“top：1px”。如果你重写这个也好一点（对于0，或者更好的是-1）。你可能还想玩线高（现在也是1）。

来源

2015-08-30 20:33:35 petercm

在我的CSS中，这对我有用。 GL

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

来源

2017-07-11 21:03:49 jgritten

在引导徽章中更改图形边距/填充

回答

相关问题