html - h标签的额外字间距

Question

我有h2标签并且有内容: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;
}

但是我得到了额外的间距，如下所示，没有 text-align: justify;

我想要没有额外的间距。

编辑

使用text-align: justify;

Answer 1

我在评论中回答了，但是 Glyphicon Haflings字体正在应用于整个 <h2>标签，这会导致间距问题。该字体应仅应用于专门包含 Glyphicon 的元素。

为了提高特异性，您可以使用 <i>标记为 <h2> 的第一个 child ，另一个将(如 OP 所做的那样)移动 font-family到 .arrow-heading:before CSS 中的选择器。