html - Change Glyphicon margin/padding in bootstrap badge -
i using glyphicon in badge, , have glyphicon have smaller font-size text. works fine, glyphicon not centered vertically in badge.
when try , give margin-bottom or padding-bottom goes , adds entire badge, , not glyphicon element.
here .css class i'm using:
.glyphicon-test3 { margin-right: 5px; font-size: 6px; padding-bottom: 8px; }
here html:
<div> <span id="test" class="badge"> <span class="glyphicon glyphicon-plus-sign glyphicon-test3"></span> small icon padding </span> </div>
i've made plnkr shows effect in it's full glory: http://plnkr.co/edit/vbieaffmfujy2qcdpcvi
any ideas?
just add top:-1px
, overwrite existing top: 1px
.glyphicon
selector
.glyphicon { position: relative; top: 1px; <<<this causing problem display: inline-block; font-family: "glyphicons halflings"; font-style: normal; font-weight: 400; line-height: 1; }
so
.glyphicon-test3 { margin-right: 5px; font-size: 6px; line-height: 2; top: -1px; <<<here }
note: remove padding , add height
Comments
Post a Comment