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>的第一个孩子，而另一个标记（如OP所做的那样）将font-family移动到.arrow-heading:before你的CSS中的选择器。