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;

enter image description here

i want no spacing.

edit

with text-align: justify;

enter image description here

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

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -