在文本中使用字形图标时如何避免额外的 space？

Question

我有一个 div，文本在 div.But 中，当添加 glyphicon 时会出现奇怪的行为，即单词之间的间距变大了。

如何避免这种情况？

<div class="glyphicon  glyphicon-chevron-up">With glyphicon</div>
<div>Without glyphicon</div>

Demo of the issue

Demo of Implementation in my application

Answer 1

glyphicon class 应用可以呈现符号的 font-family : 'Glyphicons Halflings'。但是你已经在同一个 <div> 中添加了你的文本。这样该字体也将应用于您的文本。我已将文本移到另一个 <span> 并将所需的 font-family : 'sans-serif' 应用到 text.Which 解决了问题，或者只需将您的文本从 <div> 中移出，这也行得通

有字形没有字形

新建Class

.newFont{
      font-family: sans-serif
}

JdFiddle

Answer 2

这个有效...

<div class="glyphicon glyphicon-chevron-up"></div>With glyphicon
<div>Without glyphicon</div>

如果你不能用这个，那就用这个：

 <div class="glyphicon  glyphicon-chevron-up" style="color: steelblue;font-size: initial;" data-toggle="collapse"   href="#new"></div><span style="color: steelblue;font-size: initial;" href="#new">
Glyhicon div with collapse</span>
<div class="collapse in" id="new">
Something goes here
</div>

然后你只能选择点击图标来切换。

Answer 3

您可以为 Glyphicons 添加跨度

<div><span class="glyphicon  glyphicon-chevron-up"></span>With glyphicon</div>
<div>Without glyphicon</div>

效果很好，为字形添加一个单独的跨度是一种很好的做法。您的代码中发生的事情是 glyphicon class 属性被应用于您在 [=20 中编写的内容=] 标签。

Answer 4

如果你想避免文本并且你想在 glyphicon 中写入文本你应该添加到 bootstrap glyphicon class before 属性所以它只对 before 有效，就像这样：

  /*add the :before to glyphicon */

      .glyphicon:before  {
      position: relative;
      top: 1px;
      display: inline-block;
      font-family: 'Glyphicons Halflings';
      font-style: normal;
      font-weight: normal;
      line-height: 1;

      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

在文本中使用字形图标时如何避免额外的 space？

How to avoid extra space when using glyphicon with text?

css

twitter-bootstrap

glyphicons

twitter-bootstrap-3