html - Extra Word spacing of h tag -
i have h2
tag , there content :before
.
html
<h2 class="glyphicon arrow-heading text-white margin-zero" style="z-index: 1;"> h2 tag , has word spacing problem </h2>
css
.arrow-heading:before { content: "\e072"; color: #9b0d25; float: left; } .glyphicon { position: relative; top: 1px; display: inline-block; font-family: 'glyphicons halflings'; font-style: normal; font-weight: 400; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .text-white { color: #fff; } .margin-zero { margin: 0em; } h2 { font-size: 1.5vw; }
but spacing shown below without text-align: justify;
i want no spacing.
edit
with text-align: justify;
i answered in comments, glyphicon haflings
font being applied entire <h2>
tag, , cause spacing problem. font should applied element containing glyphicon.
to increase specificity, use <i>
tag first child of <h2>
, , (as op did) moving font-family
.arrow-heading:before
selector in css.
Comments
Post a Comment