Extra spacing between h tags
I have a tag h2
and I have content :before
.
Html
<h2 class="glyphicon arrow-heading text-white margin-zero" style="z-index: 1;">
This is h2 tag and it 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 I am getting extra spacing like below without text-align: justify;
I want no extra spacing.
EDIT
FROM text-align: justify;
source to share
I answered in the comments, but the font Glyphicon Haflings
is applied to the whole tag <h2>
and it will cause a spacing issue. The font should only be applied to the element containing the Glyphicon.
To increase the specificity, you can use the tag <i>
as the first child <h2>
and the other would (as the OP did) move font-family
to a selector .arrow-heading:before
in your CSS.
source to share